文章详情页

html5 - CSS画五角星画的不正

【字号：大中小】日期：2023-01-16 18:49:53浏览：73作者：猪猪

问题描述

<!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>

各位大神指点下，这个五角星为何不正。

问题解答

回答1：

感觉也有点不太正...

Html5

上一条：html5 - electron有没有api可以知道系统输入法的状态下一条：html5 - CSS3动画执行过程中导致显示模糊

相关文章：

1. javascript - 这种上传图片预览怎么做？2. python - 如何将文本文件的CR换行符换成LF换行符？3. javascript - input输入框触发change事件后，外部元素会被选中4. js怎样实现在类似qq的联系人分组中进行搜索后，又可恢复原分组的界面？5. python - scrapy-redis爬虫运行是连接redis数据库连接错误6. python3.x - mongodb 显示不出中文，都是方块，该如何解决？7. linux - 【已解决】fabric部署的Python项目Apache启动之后提示403Forbidden该如何解决？8. html5 - H5 如何进行缓存页面资源包索引？9. 怎样用python给mp3添加封面？10. python相关问题求解决，有偿

排行榜

					
					html5 - H5 如何进行缓存页面 资源包 索引？
linux - 【已解决】fabric部署的Python项目Apache启动之后提示403Forbidden该如何解决？
使用Grunt connect的AngularJS html5Mode咕unt 0.4.5
calss调用了 也设置了颜色，可是网站不显示。请问大佬是什么情况啊
javascript - yarn npm和cpmp
javascript - 这种上传图片预览怎么做？
nginx - php-fpm更改默认端口后无法启动
python - 如何将文本文件的CR换行符换成LF换行符？
python相关问题求解决，有偿
html5 - CSS画五角星画的不正
angular.js - 有谁知道吗用ng-bind-html绑定html。但是html却被转义了
				

热门标签