css带箭头的按钮 |css 同级元素

向左滑动css，词库中css文件，css媒介查询宽高，css去掉li默认属性，css div鼠标点击变色，如何让ie的css兼容，css 同级元素 css带箭头的按钮 |css 同级元素

/* 样式表 */
.btn {
position: relative;
display: inline-block;
padding: 10px 20px;
background: #3f51b5;
color: #fff;
border-radius: 5px;
text-align: center;
}
.btn::before {
content: "";
position: absolute;
top: 50%;
left: -10px;
margin-top: -5px;
width: 0;
height: 0;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-right: 10px solid #3f51b5;
}
.btn:hover::before {
border-right-color: #fff;
}

首先，大家需要给按钮添加一个相对定位，并设置内边距、背景颜色和文本颜色。

.btn {
position: relative;
display: inline-block;
padding: 10px 20px;
background: #3f51b5;
color: #fff;
border-radius: 5px;
text-align: center;
}

然后，大家可以通过伪元素::before添加一个三角形。这个三角形的大小可以通过边框的宽度来控制。大家需要将三角形相对定位，并将其位置移到按钮的左侧。大家还需要设置三角形的边框颜色，以及使其上下边框透明，使得只有右边框呈现三角形的形状。

.btn::before {
content: "";
position: absolute;
top: 50%;
left: -10px;
margin-top: -5px;
width: 0;
height: 0;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-right: 10px solid #3f51b5;
}

最后，当鼠标悬停在按钮上时，大家可以通过伪元素::before来改变三角形的颜色。这可以通过给border-right-color设置不同的值来实现。

.btn:hover::before {
border-right-color: #fff;
}

现在，大家的带箭头的按钮就完成了。您可以通过将.btn类应用于标签或