CSS作為前端設計的重要一環，可以實現很多精美的效果，今天我們來學習一下如何制作帶三角形的按鈕。

<style>
.button{
background-color: #f7f7f7;
border: 1px solid #ccc;
color: #333;
cursor: pointer;
display: inline-block;
font-family: "Microsoft YaHei";
font-size: 14px;
line-height: 34px;
padding: 0 20px;
position: relative;
text-align: center;
text-decoration: none;
}
.button:before{
content: "";
display: block;
border: 10px solid transparent;
border-right-color: #f7f7f7;
position: absolute;
top: 50%;
right: -20px;
margin-top: -10px;
}
</style>

我們首先定義一個樣式，命名為button，這個樣式定義了按鈕的基本樣式，如背景色、邊框等等。

接下來，我們使用偽元素:before來實現三角形的效果。content屬性可以讓該元素產生內容，這里我們將它設置為空字符串，然后利用border屬性添加三角形的邊框。設置邊框的顏色為透明，這樣就不會影響按鈕的背景色，把三角形放在按鈕右側，top屬性設置為按鈕高度的一半，right屬性設置為負的三角形寬度，這樣三角形就恰好在按鈕的右側了。margin-top再把它調整到正中間就好了。

最后，我們的帶三角形的按鈕就完成了！可以根據實際需要進行樣式的調整。