如何创建斜边div？

Question

我想创建一个两侧都有坡度的div。我正在使用Bootstrap。

示例图片

Answer 1

您可以像这样使用transform: skew()：

＆＃13;

＆＃13;

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);
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

fiddle。

Answer 2

CSS3 skew transform正是您所寻找的：

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>