今天,我們要來討論一下關于CSS播放器的形狀問題。大多數人使用的CSS播放器都是圓形,但其實,我們可以通過一些簡單的CSS代碼,來改變播放器的形狀,使其更符合我們的個性與需求。
//正方形播放器 .square { width: 50px; height: 50px; border-radius: 0; } //橢圓形播放器 .ellipse { width: 50px; height: 30px; border-radius: 50% / 30%; } //三角形播放器 .triangle { width: 0; height: 0; border-top: 25px solid transparent; border-bottom: 25px solid transparent; border-right: 50px solid #f00; border-radius: 3px; } //五邊形播放器 .pentagon { width: 0; height: 0; border-bottom: 52px solid #f00; border-left: 26px solid transparent; border-right: 26px solid transparent; transform: rotate(35deg); } //八邊形播放器 .octagon { width: 50px; height: 50px; background: #f00; transform: rotate(45deg); position: relative; } .octagon:before, .octagon:after { content: ""; position: absolute; top: 0; left: 0; border-bottom: 18px solid #f00; border-left: 18px solid transparent; border-right: 18px solid transparent; width: 14px; height: 0; } .octagon:before { transform: rotate(-45deg); } .octagon:after { transform: rotate(45deg); }
以上就是幾個常見的播放器形狀示例,當然,你還可以根據自己的創意來自定義播放器形狀。只要你掌握了CSS基礎,就可以輕松實現你的設計。
上一篇css表格高度被撐大
下一篇css表格邊距會出現