我正在尝试设计一个像这样的锚标记:
我遇到的问题是,我无法找到一种方法来剪切右边框,从而产生图中所示的效果。请注意,按钮背景颜色必须是透明的,并且会根据文本的行高剪切边框。
这是我目前能够实现的:
a {
display: inline-block;
color: red;
text-decoration: none;
position: relative;
text-align: center;
padding: 10px 20px;
}
a::before {
content: "";
width: 100px;
border: 1px solid red;
position: absolute;
top: 0;
bottom: 0;
left: 0;
height: 100%;
}
<a href="#">Neem contact met ons op</a>