CSS 多邊形按鈕是一種比較常見的按鈕樣式,其特點是可以充分利用 CSS 來實現不同形狀的按鈕效果。下面我們來介紹一下如何使用 CSS 來實現多邊形按鈕。
.btn { display: inline-block; padding: 10px 15px; background-color: #007bff; color: #fff; text-align: center; text-transform: uppercase; font-weight: bold; cursor: pointer; border: none; } .btn:before { content: ""; position: absolute; top: 0; left: 0; height: 0; width: 0; border-style: solid; } .btn--triangle:before { border-width: 0 15px 15px 0; border-color: transparent #007bff transparent transparent; } .btn--circle:before { height: 100%; width: 100%; border-radius: 50%; border-width: 3px; border-color: #fff; } .btn--diamond:before { height: 0; width: 0; border-width: 20px; border-style: solid; border-color: transparent #007bff transparent transparent; transform: rotate(45deg); } .btn--hexagon:before { height: 0; width: 40px; border-width: 20px 20px 0 20px; border-style: solid; border-color: #007bff; transform: rotate(60deg); } .btn--octagon:before { height: 0; width: 40px; border-width: 20px 11.2px; border-style: solid; border-color: #007bff; transform: rotate(45deg); }
上面的代碼展示了如何利用 CSS 來創建不同形狀的多邊形按鈕。其中通過before
偽元素來實現,通過設置偽元素的content
屬性為空字符串,可以讓其在頁面上不占據任何空間。我們可以通過調整偽元素的border-width
、border-color
、height
、width
、border-radius
等屬性來實現不同形狀的按鈕效果。
以上是關于 CSS 多邊形按鈕的一些簡單介紹與實現方法。通過利用 CSS 的強大特性,我們可以實現各種樣式的多邊形按鈕,從而增加頁面的吸引力和交互性。
上一篇vue添加和刪除