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

Question

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

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

Answer 1

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转了个角度，推荐用作伪元素垫在底下

补个链接

Answer 2

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

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

Answer 3

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 这个参数，前面都是前缀