問題描述

這個(gè)形狀使用css3怎么寫出來，我不想使用背景圖實(shí)現(xiàn)這個(gè)效果。

2.右側(cè)的圓角怎么實(shí)現(xiàn)？

問題解答

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轉(zhuǎn)了個(gè)角度，推薦用作偽元素墊在底下

補(bǔ)個(gè)鏈接

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

自己補(bǔ)充一些廠商前綴，如果要兼容的話

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 這個(gè)參數(shù)，前面都是前綴