希臘國旗是由藍白相間的九條橫杠組成的,其中五條藍色橫杠分別占據旗幟最上方、最下方以及中間三個位置,它們與四條白色橫杠交錯排列。要用CSS來繪制這面國旗,我們需要用到以下代碼:
.flag { width: 200px; height: 120px; background-color: white; position: relative; } .flag::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 20%; background-color: blue; } .flag::after { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 20%; background-color: blue; } .flag .stripe { position: absolute; left: 0; width: 100%; height: 16%; background-color: white; border-bottom: 1px solid black; } .flag .stripe:nth-child(odd) { top: 22%; } .flag .stripe:nth-child(even) { top: 38%; } .flag .stripe:nth-child(1) { top: 6%; } .flag .stripe:nth-child(9) { top: 76%; } .flag .stripe::before { content: ""; position: absolute; top: -10%; left: 0; width: 100%; height: 120%; background-color: white; transform: skew(-30deg); } .flag .stripe:nth-child(odd)::before { transform-origin: right; } .flag .stripe:nth-child(even)::before { transform-origin: left; } .flag .stripe:nth-child(1)::before { height: 140%; } .flag .stripe:nth-child(9)::before { height: 140%; }
這些CSS代碼可以在一個class為“flag”的元素上繪制希臘國旗。我們首先設置這個元素的寬度和高度以及背景顏色,然后利用偽元素before和after來分別繪制旗幟最上方和最下方的藍色橫杠。接下來,我們使用class為“stripe”的元素來繪制剩余的白色橫杠。由于彎曲的橫杠形狀,我們還需要使用偽元素before來進行傾斜變形。
上一篇jquery 作用 功能
下一篇jquery 傳參、