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 這個參數，前面都是前綴