梯形的实现:
- <div class="front_div">
<div class="transform_div"></div>
<div class="box">
内容 部分
</div>
</div> ```
对应css
.transform_div{position: absolute; width: 100%; height: 100%; transform: perspective(244px) rotateX(-5deg);background: -webkit-gradient(linear,0 0,0 bottom, from(rgba(255,140,17,0.7)),to(#ff8c11)); border-radius: 6px;}
或者:
<div class="front_div"></div>
.front_div{
position: relative;
display: inline-block;
padding: .5em 1em .35em;
color: white;
}
.front_div::before {
content: '';
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
z-index: -1;
background: #58a;
transform: perspective(.5em) rotateX(-5deg);
background: -webkit-gradient(linear,0 0,0 bottom, from(#7abeec),to(#56abe4));;
}
注释: front_div 是最外层div transform_div是变形的div 即梯形div box 为内容div .
因为如果把内容放到transform里面 内容也会变形 所以用定位使两个div重合 既能显示梯形 又能像是内容 主要用了透视属性: perspective 和旋转: rotatex()