How do I create a slope edged div?

Question

I want to create a div that has a slope on both sides. I am working with Bootstrap.

Example image

Answer 1

You can use transform: skew() like this:

div {
  position:relative;
  width:450px;
  margin:0 auto;
  padding:50px
}

div:before {
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:#E5CC7C;
  z-index:-1;
  transform:skew(-20deg);
}

<div>
  Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum 
</div>

And fiddle.

Answer 2

The CSS3 skew transform is what you are looking for:

body {
background-color: rgb(0,0,0);
}

.summary p {
display: block;
margin: 10px auto;
}

.summary p::before {
position: relative;
display: block;
content: '';
width: 45px;
height: 45px;
margin: 10px auto;
background-color: rgb(138,125,81);
border: 4px solid rgb(200,177,109);
border-radius: 45px;
}

.summary {
display: block;
width: 290px;
margin: 100px auto;
padding: 6px 56px;
color: rgb(142,121,92);
background-color: rgb(229,204,124);

-ms-transform: skewX(-40deg); /* IE 9 */
-moz-transform: skewX(-40deg); /* Mozilla */
-webkit-transform: skewX(-40deg); /* Safari */
transform: skewX(-40deg); /* Standard syntax */
}

.summary p, .summary img {
-ms-transform: skewX(40deg); /* IE 9 */
-moz-transform: skewX(40deg); /* Mozilla */
-webkit-transform: skewX(40deg); /* Safari */
transform: skewX(40deg); /* Standard syntax */
}

<div class="summary">
<img alt="" />
<p>We empower business process with best techni-
cal solutions to maximize business operational
efficiency. Productivity thus ensures optimum
profitability. Analyzed Business process will be
technology redefined and process re-engi-</p>
</div>