css样式之梯形

1、样式

.main{
　　position: relative;
　　display: table;
　　width:-moz-fit-content;
　　min-height: 10%;
　　line-height: 40px;
　　padding: .5em 3em .35em 1em;
}
.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>

转载于:https://www.cnblogs.com/gfuksea/p/10621130.html