希臘國旗是由藍、白、藍三條橫線組成,中間有一個白色十字架,十字架上三個角落各有一個藍色正方形。
.flag { width: 300px; /* 設置國旗寬度 */ height: 200px; /* 設置國旗高度 */ background-color: blue; /* 設置國旗背景為藍色 */ position: relative; } .flag:before, .flag:after { content: ""; /* 使用偽元素創建十字架 */ position: absolute; background-color: white; } .flag:before { top: 40px; bottom: 40px; left: 135px; right: 135px; } .flag:after { top: 80px; bottom: 80px; left: 90px; right: 90px; } .flag div { position: absolute; background-color: blue; /* 設置藍色橫條 */ } .flag div:nth-child(1) { top: 0; left: 0; width: 100%; height: 40%; } .flag div:nth-child(2) { bottom: 0; left: 0; width: 100%; height: 40%; } .flag div:nth-child(3) { top: 40%; left: 0; width: 35%; height: 40%; } .flag div:nth-child(4) { top: 40%; right: 0; width: 35%; height: 40%; }
使用這段CSS代碼可以繪制出希臘國旗的效果。
上一篇mysql 里面的不等于
下一篇css繪制嘆號圖標