<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
border-width: 0;
}
html,
body {
padding: 0;
margin: 0;
padding-top: 30px
}
:root {
--width: 30vw;
--height: calc(var(--width) * 2 / 3);
--bg-color: #f40002;
--star-color: #faf408;
--grid: calc(var(--height) / 2 / 10);
--radius: calc(var(--grid) * 3);
--sin18: 0.3090169943749474;
--cos18: 0.9510565162951535;
--tan36: 0.7265425280053608;
--OL: calc(var(--radius) * var(--sin18));
--EL: calc(var(--radius) * var(--cos18));
--GL: calc(var(--EL) * var(--tan36));
}
.flag {
position: relative;
margin: 0 auto;
width: var(--width);
height: var(--height);
background: var(--bg-color);
}
.star-five-big {
position: absolute;
top: calc(5 * var(--grid) - var(--OL));
left: calc(5 * var(--grid) - var(--EL));
width: 0;
height: 0;
border-color: var(--star-color) transparent transparent;
border-width: var(--GL) var(--EL);
border-style: solid;
}
.star-five-big::before {
position: absolute;
top: calc(var(--GL) * -1);
left: calc(var(--EL) * -1);
content: "";
display: block;
width: 0;
height: 0;
border-color: var(--star-color) transparent transparent;
border-width: var(--GL) var(--EL);
border-style: solid;
transform: rotate(72deg);
transform-origin: var(--EL) var(--OL);
}
.star-five-big::after {
position: absolute;
top: calc(var(--GL) * -1);
left: calc(var(--EL) * -1);
content: "";
display: block;
width: 0;
height: 0;
border-color: var(--star-color) transparent transparent;
border-width: var(--GL) var(--EL);
border-style: solid;
transform: rotate(-72deg);
transform-origin: var(--EL) var(--OL);
}
.star-five-small {
position: absolute;
width: 0;
height: 0;
border-color: var(--star-color) transparent transparent;
border-width: calc(var(--GL) / 3) calc(var(--EL) / 3);
border-style: solid;
transform-origin: calc(var(--EL) / 3) calc(var(--OL) / 3);
}
.star-five-small::before {
position: absolute;
top: calc(var(--GL) * -1 / 3);
left: calc(var(--EL) * -1 / 3);
content: "";
display: block;
width: 0;
height: 0;
border-color: var(--star-color) transparent transparent;
border-width: calc(var(--GL) / 3) calc(var(--EL) / 3);
border-style: solid;
transform: rotate(72deg);
transform-origin: calc(var(--EL) / 3) calc(var(--OL) / 3);
}
.star-five-small::after {
position: absolute;
top: calc(var(--GL) * -1 / 3);
left: calc(var(--EL) * -1 / 3);
content: "";
display: block;
width: 0;
height: 0;
border-color: var(--star-color) transparent transparent;
border-width: calc(var(--GL) / 3) calc(var(--EL) / 3);
border-style: solid;
transform: rotate(-72deg);
transform-origin: calc(var(--EL) / 3) calc(var(--OL) / 3);
}
.one {
top: calc(2 * var(--grid) - var(--OL) / 3);
left: calc(10 * var(--grid) - var(--EL) / 3);
transform: rotate(-48.96deg);
}
.two {
top: calc(4 * var(--grid) - var(--OL) / 3);
left: calc(12 * var(--grid) - var(--EL) / 3);
transform: rotate(-26.13deg);
}
.three {
top: calc(7 * var(--grid) - var(--OL) / 3);
left: calc(12 * var(--grid) - var(--EL) / 3);
transform: rotate(-2.06deg);
}
.four {
top: calc(9 * var(--grid) - var(--OL) / 3);
left: calc(10 * var(--grid) - var(--EL) / 3);
transform: rotate(20.66deg);
}
</style>
</head>
<body>
<div class="flag">
<div class="star-five-big"></div>
<div class="star-five-small one"></div>
<div class="star-five-small two"></div>
<div class="star-five-small three"></div>
<div class="star-five-small four"></div>
</div>
</body>
</html>预览 | 下载
感谢各位的阅读，更多文章请前往九天小窝。
标签：EL,--,width,HTML,var,calc,border,生日快乐,CSS From： https://blog.csdn.net/as1278/article/details/142669893