CSS左側帶尖的按鈕樣式非常簡單易用,而且非常符合現代UI設計的風格,可以讓網頁看起來更加時尚和有品味。下面是一個基本的實現方法。
.btn { display: inline-block; padding: 10px 20px; background-color: #333; color: #fff; position: relative; overflow: hidden; } .btn::before { content: ""; display: block; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 0; height: 0; border-top: 20px solid transparent; border-bottom: 20px solid transparent; border-right: 20px solid #333; }
首先,我們定義一個按鈕類 `.btn`,設置了一些基本樣式,例如內邊距、背景顏色、文本顏色等等。這些可以根據需要自行修改。然后我們使用 `position: relative` 設置了 `.btn` 容器的相對定位,以便我們在其中創建一個偽元素(pseudo-element),也就是一個虛擬的DOM節點。
我們使用 `::before` 偽元素來實現左側的三角形形狀。通過設置 `content: ""` 讓這個偽元素變成一個空的元素,然后使用 `position: absolute` 絕對定位,將其放置在 `.btn` 容器的左側。我們使用 `border-*` 屬性來創建三角形的形狀,使用透明的邊框來消除多余的線條,最后設置一個不透明的顏色,這里我們使用了背景色 `.btn` 的同樣顏色。
通過上面的CSS代碼,我們就成功地實現了一個漂亮的CSS左側帶尖的按鈕樣式。這個樣式非常簡單易懂,我們可以通過修改偽元素的邊框顏色來實現其他不同色調的樣式。
上一篇css左右上下固定