中國國旗采用紅色底面,中間鑲嵌五顆黃色五角星。在CSS中,我們可以使用偽元素來實現這個國旗效果,具體代碼如下:
:before { content: ""; display: block; height: 0; width: 0; border-top: 50px solid yellow; border-left: 35px solid transparent; border-right: 35px solid transparent; position: absolute; left: 50%; top: 0; transform: translateX(-50%); } :after { content: ""; display: block; height: 0; width: 0; border-bottom: 50px solid yellow; border-left: 35px solid transparent; border-right: 35px solid transparent; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); } div { height: 100px; width: 100%; background-color: red; position: relative; } .star { height: 20px; width: 20px; background-color: yellow; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .star:nth-child(1) { transform: translate(-70%, -50%); } .star:nth-child(2) { transform: translate(-30%, -50%); } .star:nth-child(3) { transform: translate(10%, -50%); } .star:nth-child(4) { transform: translate(50%, -50%); } .star:nth-child(5) { transform: translate(90%, -50%); }
通過使用:before和:after偽元素,我們創建了兩個三角形,分別在國旗的上下方。我們還創建了一個div元素,作為國旗的主體,設置background-color屬性為紅色即可。最后,我們在國旗中央鑲嵌五顆黃色五角星,使用.star類來定義星星樣式,并通過nth-child選擇器來分別定義每一個星星在國旗中的位置。
上一篇css設置居中但是偏左
下一篇css怎么做個紅色的心