几乎有：完全平滑的梯形与CSS技巧

Question

我想要创建一个四舍五入的圆角。我得到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; 
}​ 

Answer 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/