文章详情页

html5 - CSS画五角星画的不正

浏览：126日期：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>

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

问题解答

回答1：

感觉也有点不太正...

Html5

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

相关文章：

1. javascript - 百度echarts series数据更新问题2. Mysql && Redis 并发问题3. css3 - css before 中文乱码？4. php - 第三方支付平台在很短时间内多次异步通知,订单多次确认收款5. javascript - 请问一下组件的生命周期beforeDestory是在什么情况下面触发的呢？6. mysql - 一个表和多个表是多对多的关系，该怎么设计7. javascript - 请教空白文本节点的问题8. javascript - 父选项卡bug，子选项卡好用，求解？9. javascript - node服务端渲染的困惑10. mysql新建字段时 timestamp NOT NULL DEFAULT ’0000-00-00 00:00:00’ 报错

排行榜

					
					css3 - IE浏览器下，一个元素设置overflow:auto后，出现下拉滚动条，拖动滚动条图片会移动，但文字不移动
docker start -a dockername 老是卡住，什么情况？
angular.js - angularjs 用ng-reapt渲染的dom  怎么获取上面的属性
javascript - 百度echarts series数据更新问题
javascript - 父选项卡bug，子选项卡好用，求解？
mysql - 一个表和多个表是多对多的关系，该怎么设计
php - 第三方支付平台在很短时间内多次异步通知,订单多次确认收款
mysql新建字段时 timestamp NOT NULL DEFAULT ’0000-00-00 00:00:00’ 报错
css3 - css  before 中文乱码？
java - wait()，notify(),notifyAll()  T2 start! T2 end! T1 start! 为什么会阻塞
javascript - 请问一下组件的生命周期beforeDestory是在什么情况下面触发的呢？
				

热门标签