文章詳情頁

html5 - CSS畫五角星畫的不正

瀏覽：130日期：2023-01-16 18:49:53

問題描述

<!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> </body></html>

各位大神指點(diǎn)下，這個五角星為何不正。

問題解答

回答1：

感覺也有點(diǎn)不太正...

Html5

上一條：html5 - electron有沒有api可以知道系統(tǒng)輸入法的狀態(tài)下一條：html5 - CSS3動畫執(zhí)行過程中導(dǎo)致顯示模糊

相關(guān)文章：

1. objective-c - ios百度地圖定位問題2. html - css 如何添加這種邊框?3. javascript - js 有什么優(yōu)雅的辦法實(shí)現(xiàn)在同時打開的兩個標(biāo)簽頁間相互通信？4. javascript - 關(guān)于定時器與防止連續(xù)點(diǎn)擊問題5. javascript - 求助關(guān)于js正則問題6. javascript - node.js服務(wù)端渲染解疑7. javascript - 求助這種功能有什么好點(diǎn)的插件？8. html5 - rudy編譯sass的時候有中文報(bào)錯9. 為何 localStorage、sessionStorage 屬于html5的范疇，但是為何 IE8卻支持？10. 微信開放平臺 - Android調(diào)用微信分享不顯示