css样式之梯形
1、样式
.main{
position: relative;
display: table;
width:-moz-fit-content;
min-height: 10%;
line-height: 40px;
padding:
}
.main::before{
content: ' ';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
border: 1px solid rgba(0,0,0,.4);
border-bottom: none;
transform: perspective(1em) rotateX(2deg);
transform-origin: bottom left; //控制梯形朝向 bottom是两边, bottom left 往右 ,bottom right往左
background-color: green;
}
<div class="main"><span>你好</span></div>