2

我想创建一个所有角都变圆的梯形。我已经走了 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;
}​
4

1 回答 1

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/

于 2012-12-08T20:39:32.050 回答