HTML 和 CSS 绘制中华人民共和国国旗：简单教程和代码示例
<!DOCTYPE html>
<html>
<head>
<title>中华人民共和国国旗</title>
<style>
.flag {
width: 600px;
height: 400px;
background-color: red;
position: relative;
overflow: hidden;
border: 1px solid black;
}
.star {
width: 120px;
height: 120px;
background-color: yellow;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
clip-path: polygon(50% 0%, 62% 38%, 100% 38%, 69% 59%, 82% 100%, 50% 75%, 18% 100%, 31% 59%, 0% 38%, 38% 38%);
}
.star:after {
content: '';
width: 120px;
height: 120px;
background-color: yellow;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(36deg);
clip-path: polygon(50% 0%, 62% 38%, 100% 38%, 69% 59%, 82% 100%, 50% 75%, 18% 100%, 31% 59%, 0% 38%, 38% 38%);
}
</style>
</head>
<body>
<div class='flag'>
<div class='star'></div>
</div>
</body>
</html>
<pre><code class="language-css">.flag {
width: 600px;
height: 400px;
background-color: red;
position: relative;
overflow: hidden;
border: 1px solid black;
}
.star {
width: 120px;
height: 120px;
background-color: yellow;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
clip-path: polygon(50% 0%, 62% 38%, 100% 38%, 69% 59%, 82% 100%, 50% 75%, 18% 100%, 31% 59%, 0% 38%, 38% 38%);
}
.star:after {
content: '';
width: 120px;
height: 120px;
background-color: yellow;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(36deg);
clip-path: polygon(50% 0%, 62% 38%, 100% 38%, 69% 59%, 82% 100%, 50% 75%, 18% 100%, 31% 59%, 0% 38%, 38% 38%);
}
</code></pre>
<p>效果如下：</p>
<p><img src="https://i.loli.net/2021/05/07/VNytKYPZpJ9XHmB.png" alt="中华人民共和国国旗" /></p>
原文地址: https://www.cveoy.top/t/topic/mOdo 著作权归作者所有。请勿转载和采集!