html5 - CSS畫五角星畫的不正
問題描述
<!DOCTYPE HTML><html><head> <meta charset='utf-8'> <title>2-3</title> <style type='text/css'> *{margin: 0;padding: 0; }.backgroundOne{ width:300px; height:200px; background-color:#f00; border-radius: 15px;}.backgroundOne > p { width: 0px; height: 0px; border-right: 100px solid transparent; border-bottom: 70px solid #ff0; border-left: 100px solid transparent; -webkit-transform: rotate(35deg); -moz-transform: rotate(35deg);-ms-transform: rotate(35deg); -o-transform: rotate(35deg); transform: rotate(35deg); }.backgroundOne > p::after{ width: 0px; height: 0px; display: block; border-right: 100px solid transparent; border-bottom: 70px solid #ff0; border-left: 100px solid transparent; content: ’’; -webkit-transform: rotate(-70deg) translate(29px,-130px); -moz-transform: rotate(-70deg) translate(29px,-130px);-ms-transform: rotate(-70deg) translate(29px,-130px); -o-transform: rotate(-70deg) translate(29px,-130px); transform: rotate(-70deg) translate(29px,-130px);}.backgroundOne > p::before{ height: 0px; width: 0px; display: block; content: ’’; border-right: 30px solid transparent; border-bottom: 80px solid #ff0; border-left: 30px solid transparent; -webkit-transform: rotate(-35deg) translate(-30px,-80px); -moz-transform: rotate(-35deg) translate(-30px,-80px);-ms-transform: rotate(-35deg) translate(-30px,-80px); -o-transform: rotate(-35deg) translate(-30px,-80px); transform: rotate(-35deg) translate(-30px,-80px); }.backgroundOne > p:nth-child(1) {transform: translate(-50px, 20px) rotate(35deg) scale(0.3,0.3);}.backgroundOne > p:nth-child(2) {transform: translate( 0px, -80px) rotate(60deg) scale(0.1,0.1);}.backgroundOne > p:nth-child(3) {transform: translate( 22px, -125px) rotate(80deg) scale(0.1,0.1);}.backgroundOne > p:nth-child(4) {transform: translate( 22px, -162px) rotate(35deg) scale(0.1,0.1);}.backgroundOne > p:nth-child(5) {transform: translate( 0px, -210px) rotate(65deg) scale(0.1,0.1);} </style></head><body><p class='backgroundOne'> <p></p> <p></p> <p></p> <p></p> <p></p></p></body></html>
各位大神指點(diǎn)下，這個(gè)五角星為何不正。
問題解答
回答1：感覺也有點(diǎn)不太正...
相關(guān)文章：
1. javascript - 分類編輯保留之前分類名稱2. css - 移動(dòng)端 line-height安卓錯(cuò)位,蘋果機(jī)正常用,縮放解決了,可是又出來了占位的問題3. 求救一下，用新版的phpstudy，數(shù)據(jù)庫(kù)過段時(shí)間會(huì)消失是什么情況？4. javascript - 彈出一個(gè)子窗口，操作之后關(guān)閉，主窗口會(huì)得到相應(yīng)的響應(yīng)，例如網(wǎng)站的某些登錄界面，django后臺(tái)的管理等，這是怎么實(shí)現(xiàn)的呢？5. javascript - 函數(shù)設(shè)置參數(shù)默認(rèn)值的問題6. list - python 求助7. javascript 的console.log 問題8. 環(huán)境搭建 - anaconda 創(chuàng)建python2.7環(huán)境中打開編譯器確是3.6版本9. mysql replace 死鎖10. extra沒有加載出來
網(wǎng)公網(wǎng)安備