「程序员的闲暇时光」之用代码绘制国旗19：巴哈马🇧🇸国旗

内容分享3天前发布小靳的日常生活_

0 0 0

如果文章对你有收获，还请不要吝啬【点赞❤️收藏⭐评论⚠】三连哦，你的鼓励将是我成长助力之一！谢谢！

先看实现效果

「程序员的闲暇时光」之用代码绘制国旗19：巴哈马🇧🇸国旗

巴哈马国旗

扩展：巴哈马国旗的由来？

① 巴哈马的历史历经多次变革，早期受英国殖民统治影响深远。在追求独立的进程中，巴哈马人民渴望拥有自身民族象征，于是国旗应运而生。

② 巴哈马国旗的设计元素精心挑选，其颜色、图案和形状皆具特殊意义，反映出自然环境、文化传统与人民精神特质。

③ 总之，巴哈马国旗见证了人民为自由、独立和尊严的不懈努力，是其历史文化和民族精神的生动展现。

再看完整源码

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8">
		<title>巴哈马国旗</title>
		<style>
			.flag {
				width: 300px;
				height: 200px;
				/* 国旗边框阴影部分 */
				box-shadow: 0 4px 8px rgba(0, 0, 0, 0.6);
			}
			.blue1,
			.yellow,
			.blue2 {
				height: 33.33%;
				width: 100%;
			}
			.blue1 {
				background-color: blue;
			}
			.yellow {
				background-color: #FECB00;
			}
			.blue2 {
				background-color: blue;
			}
			.triangle {
				width: 140px;
				height: 200px;
				background-color: black;
				border-radius: 0% 0% 0% 0%;
				position: relative;
				top: 50%;
				left: 20%;
				transform: translate(-100%, -50%);
				clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
			}
		</style>
	</head>
	<body>
		<center>
			<h1>巴哈马国旗</h1>
			<div class="flag">
				<div class="blue1"></div>
				<div class="yellow">
					<div class="triangle"></div>
				</div>
				<div class="blue2"></div>
			</div>
		</center>
	</body>
</html>