css3 - 這個(gè)形狀使用CSS怎么寫出來?
問題描述
這個(gè)形狀使用css3怎么寫出來,我不想使用背景圖實(shí)現(xiàn)這個(gè)效果。
2.右側(cè)的圓角怎么實(shí)現(xiàn)?
問題解答
回答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轉(zhuǎn)了個(gè)角度,推薦用作偽元素墊在底下
補(bǔ)個(gè)鏈接
回答2: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ù),前面都是前綴
相關(guān)文章:
1. mysql - 分庫分表、分區(qū)、讀寫分離 這些都是用在什么場景下 ,會(huì)帶來哪些效率或者其他方面的好處2. javascript - ios返回不執(zhí)行js怎么解決?3. python - 爬蟲模擬登錄后,爬取csdn后臺(tái)文章列表遇到的問題4. 視頻文件不能播放,怎么辦?5. python bottle跑起來以后,定時(shí)執(zhí)行的任務(wù)為什么每次都重復(fù)(多)執(zhí)行一次?6. html5 - HTML代碼中的文字亂碼是怎么回事?7. javascript - 求幫助 , ATOM不顯示界面!!!!8. mysql 查詢身份證號(hào)字段值有效的數(shù)據(jù)9. javascript - angular使從elastichearch中取出的文本高亮顯示,如圖所示10. javascript - 為什么在谷歌控制臺(tái) 輸出1的時(shí)候,輸出的1立馬就不見了
