我对css有点小问题.我需要一个梯形div,其左上角(角度大于90度的那个)是圆形的.我已经知道了这个： HTML： <div style="margin:30px"> <div cla
... . . 我对css有点小问题.我需要一个梯形div,其左上角(角度大于90度的那个)是圆形的.我已经知道了这个：
HTML：
<div style="margin:30px"> <div class="trapezoid"> </div></div>
CSS：
.trapezoid{ vertical-align: middle; border-bottom: 31px solid red; border-left: 25px solid transparent; height: 0; width: 150px;} 产生一个梯形.我尝试了border-top-left-radius属性,但效果还不够.
这是一个jsfiddle与上面的代码,好吧,摆弄：http://jsfiddle.net/n3TLP/5/
我需要更多信息才能评论.
提前致谢 ：)
解决方法
. 虽然我认为你最好使用< canvas> / SVG绘制这个形状,但这很接近你想要的：
.trapezoid{ vertical-align: middle; border-bottom: 120px solid red; border-left: 200px solid transparent; border-top-left-radius:30px; height: 0; width: 150px;}/* ---------- */.trapezoid { position:relative;}.trapezoid:after { content:' '; left:-14px; top:-10px; position:absolute; background:red; border-radius:40px 0 0 0; width:164px; height:40px; display:block;} 演示：http://jsfiddle.net/n3TLP/20/
它并不完美,你必须使用数字来获得你想要的尺寸,它非常挑剔.您可能对Raphaël这样的绘图感兴趣,CSS实际上并不具备复杂形状的能力(至少不是故意的).
. . .. ...