css3 - 这个形状使用CSS怎么写出来？

问题描述

这个形状使用css3怎么写出来，我不想使用背景图实现这个效果。

2.右侧的圆角怎么实现？

问题解答

p { width: 200px; height: 100px; border-radius: 0 20px 30px 0; background: #ccc; transform: scale(1.1, 1.3) perspective(.5em) rotateX(5deg); transform-origin: bottom left;}

差不多这意思吧，用transform转了个角度，推荐用作伪元素垫在底下

补个链接

p{ width:300px; height:50px; border-radius: 5px; background-color: #da8; transform: skew(15deg,0);}

自己补充一些厂商前缀，如果要兼容的话

transform:skew(30deg,20deg);-ms-transform:skew(30deg,20deg); /* IE 9 */-moz-transform:skew(30deg,20deg); /* Firefox */-webkit-transform:skew(30deg,20deg); /* Safari and Chrome */-o-transform:skew(30deg,20deg); /* Opera */

skew 这个参数，前面都是前缀