我使用 HTML 和 CSS 制作了所有国家的国旗

2025-05-25

我使用 HTML 和 CSS 制作了所有国家的国旗

你可能会问,这篇文章很特别。因为在我上一篇文章《CSS 旗帜:印度》中,我说过——

我正在开始一个名为“CSS 国旗”的新系列。我将从印度开始,制作不同国家的国旗。

我问自己:“为什么不写一篇包含所有195个国家国旗的文章,而不是写195篇文章呢?”好吧,我决定写这篇文章。

在本文中,我仅使用 HTML 和 CSS 制作了所有国家的国旗。文章末尾会附赠一份特别奖励(您必须读完文章才能看到)。


免责声明

  • 正如我在上一篇文章CSS Flag: India中提到的那样,这个系列的想法在 8 月 15 日出现在我的脑海中
  • 我不想通过这篇文章伤害任何人的感情或情绪。因为如果某个国家的国旗稍有偏差,可能会冒犯到某些人。我尊重每个国家的国旗和人民。如果您发现任何国旗有任何错误,请告诉我。我会尽快修正。
  • 如果 Codepen 在移动设备上出现问题,请尝试切换到桌面模式或通过台式机/笔记本电脑浏览器访问。
  • 我在一些旗帜中使用了图像(PNG),因为创建它们有点复杂。
  • 每面国旗的尺寸为300x200像素。部分国家的国旗尺寸可能有所不同,因此尺寸差异可能会造成略有差异。

目录:


阿富汗

阿尔巴尼亚

阿尔及利亚

安道尔

安哥拉

安提瓜和巴布达

阿根廷

亚美尼亚

澳大利亚

奥地利

阿塞拜疆

巴哈马

巴林

孟加拉国

巴巴多斯

白俄罗斯

比利时

伯利兹

贝宁

不丹

玻利维亚

波斯尼亚和黑塞哥维那

博茨瓦纳

巴西

文莱

保加利亚

布基纳法索

布隆迪

柬埔寨

喀麦隆

加拿大

佛得角

中非

乍得

智利

中国

哥伦比亚

科摩罗

刚果民主共和国

刚果共和国

哥斯达黎加

克罗地亚

古巴

塞浦路斯

捷克

丹麦

吉布提

多米尼加

多米尼加

东帝汶

厄瓜多尔

埃及

萨尔瓦多

赤道几内亚

厄立特里亚

爱沙尼亚

斯威士兰

埃塞俄比亚

斐济

芬兰

法国

加蓬

冈比亚

乔治亚州

德国

加纳

希腊

格林纳达

危地马拉

几内亚

几内亚比绍

圭亚那

海地

洪都拉斯

匈牙利

冰岛

印度

印度尼西亚

伊朗

伊拉克

爱尔兰

以色列

意大利

科特迪瓦

牙买加

日本

约旦

哈萨克斯坦

肯尼亚

基里巴斯

北朝鲜

韩国

科威特

吉尔吉斯斯坦

老挝

拉脱维亚

黎巴嫩

莱索托

利比里亚

利比亚

列支敦士登

立陶宛

卢森堡

马达加斯加

马拉维

马来西亚

马尔代夫

马里

马耳他

马绍尔群岛

毛里塔尼亚

毛里求斯

墨西哥

密克罗尼西亚

摩尔多瓦

摩纳哥

蒙古

黑山

摩洛哥

莫桑比克

缅甸

纳米比亚

瑙鲁

尼泊尔

荷兰

新西兰

尼加拉瓜

尼日尔

尼日利亚

北马其顿

挪威

阿曼

巴基斯坦

帕劳

巴勒斯坦

巴拿马

巴布亚新几内亚

巴拉圭

秘鲁

菲律宾

波兰

葡萄牙

卡塔尔

罗马尼亚

俄罗斯

卢旺达

圣基茨和尼维斯

圣卢西亚

圣文森特和格林纳丁斯

萨摩亚

圣马力诺

圣多美和普林西比

沙特阿拉伯

塞内加尔

塞尔维亚

塞舌尔

塞拉利昂

新加坡

斯洛伐克

斯洛文尼亚

所罗门群岛

索马里

南非

南苏丹

西班牙

斯里兰卡

苏丹

苏里南

瑞典

瑞士

叙利亚

台湾

塔吉克斯坦

坦桑尼亚

泰国

多哥

汤加

特立尼达和多巴哥

突尼斯

火鸡

土库曼斯坦

图瓦卢

乌干达

乌克兰

阿拉伯联合酋长国

英国

美国

乌拉圭

乌兹别克斯坦

瓦努阿图

梵蒂冈城

委内瑞拉

越南

也门

赞比亚

津巴布韦

奖金

正如我在文章开头所说,我将附加一个额外内容。就在这里。你可以在以下 Codepen(All in One)中找到所有国家的国旗:

总结

由于制作这些旗帜比较复杂,我在一些旗帜中使用了图片。希望你喜欢这篇文章,如果喜欢,别忘了点赞❤️。如有任何疑问或建议,请随时提出。你也可以通过“请我喝杯咖啡”来表达你的支持。我们下期再见。

参考

缩略图由@krisetyaUnsplash 提供

文章来源:https://dev.to/j471n/i-made-all-countries-flags-using-html-css-4cnc
PREV
使用 JavaScript 的图像滑块
NEXT
如何使用 Web 存储 API?