html+圆⾓梯形,⽤CSS圆⾓梯形
虽然我认为你最好使⽤< canvas> / SVG绘制这个形状，但这很接近你想要的：
.trapezoid{
svg canvasvertical-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实际上并不具备复杂形状的能⼒(⾄少不是故意的).