【问题标题】：Almost There: Completely Smooth Trapezoid with CSS Skills几乎就在那里：使用 CSS 技巧实现完全平滑的梯形
【发布时间】：2012-12-09 04:54:09
【问题描述】：

我想创建一个所有角都是圆角的梯形。我已经走了 2/4 的路，但无法让底角看起来不错。这是我目前所拥有的：http://jsfiddle.net/w8rHk/2/

色差仅供参考。最终还是一样的颜色。

问题：我如何完成这个并创建一个边缘圆润的梯形？

100 万个点，如果你可以让它在不破坏屏幕尺寸的情况下按比例放大和缩小。那是我还没有接近的忍者水平。

问题 2： 有什么方法可以在这个坏男孩身上设置渐变？

感谢您的帮助！

代码：

.trapezoid{
vertical-align: middle;
position:relative;
border-bottom: 120px solid blue;
border-left: 200px solid transparent;
border-top-left-radius:30px;
border-top-right-radius:30px;
*border-bottom-right-radius:3px;
height: 0;
width: 150px;}

.trapezoid:after {
content:' ';
left:-14px;
top:-10px;
position:absolute;
background:red;
border-radius:40px 30px 0 0;
width:164px;
height:40px;
display:block;
}

【问题讨论】：

请用specific question更新您的帖子。
黑客攻击太多了：jsfiddle.net/w8rHk/4

标签： css mobile responsive-design

【解决方案1】：

这是我的尝试，哈哈

.trapezoid{
    position:relative;
    border-bottom: 100px solid blue;
    border-right: 12px solid transparent;
    border-left: 180px solid transparent;
    width: 122px;
}

.trapezoid:before{
    content:' ';
    left:-184px;
    top:98px;
    position:absolute;
    background:blue;
    border-radius:80px 20px 80px 80px;
    width:318px;
    height:20px;
}


.trapezoid:after {
    content:' ';
    left:-11px;
    top:-7px;
    position:absolute;
    background:blue;
    border-radius:150px 50px 90px 0px;
    width:133px;
    height:30px;
}

<div style="margin:30px">
    <div class="trapezoid">
    </div>
</div>

http://jsfiddle.net/Bzj3h/

【讨论】：