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;
}

That’s pretty much what it means. Use transform to turn it to an angle. It is recommended to use it as a pseudo element underneath

Add a link

Answer 2

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

Add some manufacturer prefixes yourself if you want compatibility

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 This parameter is preceded by the prefix