html+css生成五星红旗
html吧
全部回复
仅看楼主
level 1
直接上代码
CSS:
#hongqi{
width:864px;
height:576px;
background:red;
}
#wujiao {
width: 0;
height: 0;
top:100px;
left:50px;
color: #f00;
position: absolute;
display: block;
border-right: 100px solid transparent;
border-bottom: 70px solid rgb(254,224,4);
border-left: 100px solid transparent;
-moz-transform: rotate(35deg);
-webkit-transform: rotate(35deg);
-ms-transform: rotate(35deg);
-o-transform: rotate(35deg);
}
#wujiao:before {
width: 0;
height: 0;
position: absolute;
display: block;
top: -45px;
left: -65px;
border-bottom: 80px solid rgb(254,224,4);
border-left: 30px solid transparent;
border-right: 30px solid transparent;
content: '';
-webkit-transform: rotate(-35deg);
-moz-transform: rotate(-35deg);
-ms-transform: rotate(-35deg);
-o-transform: rotate(-35deg);
}
#wujiao:after {
width: 0;
height: 0;
position: absolute;
display: block;
top: 3px;
left: -105px;
color: #F00;
border-right: 100px solid transparent;
border-bottom: 70px solid rgb(254,224,4);
border-left: 100px solid transparent;
content: '';
-webkit-transform: rotate(-70deg);
-moz-transform: rotate(-70deg);
-ms-transform: rotate(-70deg);
-o-transform: rotate(-70deg);
}
#wujiao1{
top:30px;
left:280px;
}
#wujiao2{
top:80px;
left:340px;
}
#wujiao3{
top:150px;
left:340px;
}
#wujiao4{
top:210px;
left:280px;
}
.min {
width: 0;
height: 0;
color: #f00;
position: relative;
display: block;
border-right: 20px solid transparent;
border-bottom: 14px solid rgb(254,224,4);
border-left: 20px solid transparent;
-moz-transform: rotate(35deg);
-webkit-transform: rotate(35deg);
-ms-transform: rotate(35deg);
-o-transform: rotate(35deg);
}
.min:before {
width: 0;
height: 0;
position: absolute;
display: block;
top: -10px;
left: -12px;
border-bottom: 16px solid rgb(254,224,4);
border-left: 6px solid transparent;
border-right: 6px solid transparent;
content: '';
-webkit-transform: rotate(-35deg);
-moz-transform: rotate(-35deg);
-ms-transform: rotate(-35deg);
-o-transform: rotate(-35deg);
}
.min:after {
width: 0;
height: 0;
position: absolute;
display: block;
top: 0px;
left: -20px;
color: #F00;
border-right: 20px solid transparent;
border-bottom: 14px solid rgb(254,224,4);
border-left: 20px solid transparent;
content: '';
-webkit-transform: rotate(-70deg);
-moz-transform: rotate(-70deg);
-ms-transform: rotate(-70deg);
-o-transform: rotate(-70deg);
}
html:
<div id="hongqi">
<div id="wujiao"></div>
<div id="wujiao1" class ="min"></div>
<div id="wujiao2" class ="min"></div>
<div id="wujiao3" class ="min"></div>
<div id="wujiao4" class ="min"></div>
</div>
2020年03月17日 08点03分 1
level 1
你的星星角度要调
2020年03月18日 08点03分 2
把楼删了,我来说[滑稽]
2020年03月19日 07点03分
level 1
上面那些是一个一个个字母手打的吗,我是小白
2020年03月19日 07点03分 3
在notepad上写好了copy上来的
2020年03月19日 09点03分
level 5
H汉字也能用???
2020年03月26日 02点03分 4
不好意思 谷歌翻译 了 哈哈哈哈哈哈哈哈哈
2020年03月26日 02点03分
回复º爸爸◎:[哈哈]
2020年03月26日 07点03分
level 5
w我的比你的简单 还标准[阴险]
2020年03月26日 03点03分 5
[大拇指][大拇指][大拇指][大拇指][大拇指][大拇指][大拇指]
2020年03月26日 07点03分
你…[阴险]
2020年03月27日 10点03分
不标准,因为img标签没有关闭[滑稽]
2020年04月07日 07点04分
回复贴吧用户_7ENM47P:img 关闭???? 这样吗? <img></img>
2020年04月08日 02点04分
level 2
不细节,国旗大五角星旁边的五角星都要有一个角对着大五角星。
2020年03月26日 13点03分 6
level 7
代码好多
2020年03月27日 16点03分 7
1