我想用 3px 实心边框和无背景切割按钮的两个 Angular ,如下例所示,最好只使用 CSS。我尝试了很多选择并在网上搜索,但到目前为止没有运气......你们知道实现这一目标的方法吗?感谢您的任何回应!
到目前为止我得到的是:
a.button{
padding: 10px 18px;
border: 3px solid $blue;
text-transform: uppercase;
font-size: 15px;
border-top-left-radius: 15px;
border-bottom-right-radius: 15px;
}
问题是这会导致圆 Angular ,我希望 Angular 是直线切割。
最佳答案
这应该可以帮助您入门。
您可以根据需要对其进行细化。
.button {
display: inline-block;
text-transform: uppercase;
text-decoration: none;
padding: 10px 20px;
border: 3px solid #3777BC;
margin: 20px;
position: relative;
color: #3777BC;
letter-spacing: 1px;
}
.button:before {
content: '';
width: 20px;
height: 20px;
background: #fff;
border: 3px solid #3777BC;
transform: rotate(45deg);
position: absolute;
border-top: 0;
border-left: 0;
border-bottom: 0;
top: -12px;
left: -13px;
}
.button:after {
content: '';
width: 20px;
height: 20px;
background: #fff;
border: 3px solid #3777BC;
transform: rotate(-132deg);
position: absolute;
border-top: 0;
border-left: 0;
border-bottom: 0;
top: auto;
right: -13px;
bottom: -12px;
}
<a href="#" class="button">Newsletter Signup</a>
关于css - 从带有实心边框的按钮上切掉的 Angular ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45052817/