中國國旗是由五星紅旗和黃色五角星組成的,制作起來其實非常簡單。下面我們來介紹如何用 CSS 制作中國國旗:
/* 第一步,設置背景顏色為紅色 */ .flag { background-color: red; } /* 第二步,添加黃色五角星 */ .star { position: absolute; top: 50%; left: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px; background-color: yellow; clip-path: polygon(50% 0%, 61.8% 38.2%, 98.2% 38.2%, 68.2% 61.8%, 79.5% 100%, 50% 76.2%, 20.5% 100%, 31.8% 61.8%, 1.8% 38.2%, 38.2% 38.2%); } /* 第三步,添加五顆小星星 */ .star:before { content: ""; position: absolute; top: -12px; left: 0; width: 0; height: 0; border-right: 6px solid transparent; border-bottom: 10px solid yellow; border-left: 6px solid transparent; transform: rotate(35deg); } .star:after { content: ""; position: absolute; top: -12px; left: 0; width: 0; height: 0; border-right: 6px solid transparent; border-bottom: 10px solid yellow; border-left: 6px solid transparent; transform: rotate(-35deg); } .star:nth-child(2) { transform: rotate(72deg); } .star:nth-child(2):before { transform: rotate(107deg); } .star:nth-child(2):after { transform: rotate(-107deg); } .star:nth-child(3) { transform: rotate(144deg); } .star:nth-child(3):before { transform: rotate(179deg); } .star:nth-child(3):after { transform: rotate(-179deg); } .star:nth-child(4) { transform: rotate(216deg); } .star:nth-child(4):before { transform: rotate(251deg); } .star:nth-child(4):after { transform: rotate(-251deg); } .star:nth-child(5) { transform: rotate(288deg); } .star:nth-child(5):before { transform: rotate(323deg); } .star:nth-child(5):after { transform: rotate(-323deg); }
通過以上步驟,我們就可以用 CSS 制作出完整的中國國旗了。實際上,這個方法還可以用來制作其他擁有不同數量星星的國家國旗,只需要調整一下代碼即可。
上一篇jquery @name
下一篇如何用css寫一個返回鍵