css左侧带尖的按钮样式 |css样式代码

.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左侧带尖的按钮样式。这个样式非常简单易懂，大家可以通过修改伪元素的边框颜色来实现其他不同色调的样式。