javascript - css3如何实现图中的梯形。

问题描述

问 题

目前只晓得可以用border来画矩形，而图中的梯形左右两边貌似带有一些弧度，求教大神应当如何实现？

解决方案

图好模糊，没看清楚，我大概写了一下

.t{
    width:100px;
    height:50px;
    margin: 50px;
    text-align:center;
    color:#fff;
    line-height:50px;
    background-color:red;
    position:relative;
}
.t:before{
    content:'';
    display:block;
    width:35px;
    height:50px;
    position:absolute;
    transform:skewX(-30deg);
    background:red;
    border-top-left-radius:8px;
    left:-20px;
    top:0;
}
.t:after{
    content:'';
    display:block;
    width:35px;
    height:50px;
    position:absolute;
    transform:skewX(30deg);
    background:red;
    border-top-right-radius:8px;
    top:0;
    right:-20px;
}

利用before和after来做两个斜边部分，利用skew来倾斜，利用定位来处理位置，
我看到图中主要是两边顶部有圆角，那么再利用border-radius来调整， 不知道这个符合题主的要求不？

这篇关于javascript - css3如何实现图中的梯形。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！