html+圆角梯形,用CSS圆角梯形

虽然我认为你最好使用< 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;

}

它并不完美,你必须使用数字来获得你想要的尺寸,它非常挑剔.您可能对Raphaël这样的绘图感兴趣,CSS实际上并不具备复杂形状的能力(至少不是故意的).