有没有人知道如何使这个选项卡像形状：
解决方法
以下是使用CSS3变换实现所需形状的替代方法.与SVG答案一样,当背景(形状后面)不是纯色时,也可以使用此方法.
该片段有两个样本
>一个使用变换：skew(45deg)和overflow：隐藏在父级上以隐藏左侧的倾斜区域.
>其他使用带有一点透视的rotateX变换来产生倾斜/倾斜的边.变换原点设置意味着只有一侧成角度.
div.a {
position: relative;
height: 70px;
width: 250px;
margin-top: 20px;
padding: 24px 4px 0px;
overflow: hidden;
}
div.a:before {
position: absolute;
content: '';
top: 20px;
left: 0px;
width: 100%;
height: 50px;
background: #c94935;
z-index: -1;
}
div.a:after {
position: absolute;
content: '';
top: 0px;
left: -20px;
width: 60%;
-webkit-transform: skew(45deg);
-moz-transform: skew(45deg);
transform: skew(45deg);
height: 20px;
background: #c94935;
z-index: -1;
}
div.b {
position: relative;
height: 50px;
width: 250px;
padding: 4px 4px 0px;
margin-top: 40px;
background: #c94935;
}
div.b:before {
position: absolute;
content: '';
top: -20px;
left: 0px;
width: 50%;
height: 20px;
-webkit-transform-origin: left top;
-moz-transform-origin: left top;
transform-origin: left top;
-webkit-transform: perspective(10px) rotateX(5deg);
-moz-transform: perspective(10px) rotateX(5deg);
transform: perspective(10px) rotateX(5deg);
background: #c94935;
}
body {
background: url(http://lorempixel.com/500/500);
}
<div class="a"> Lorem Ipsum Dolor Sit Amet... </div> <div class="b"> Lorem Ipsum Dolor Sit Amet... </div>
