問題描述

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