我需要创建一个按钮或一个元素,该元素将具有透明角的边界,如示例图像中所示。
我没有为此找到任何CSS,并且我正在考虑放置4个:after
元素来覆盖该元素的各个角。您对此有任何纯CSS或jquery解决方案吗?
最佳答案
我认为所选答案很糟糕!我这样做之前,我注意到这已经得到回答。它使用:before和:after。它可能与旧版浏览器兼容-如果浏览器支持伪元素。这也是一个要素。
http://jsbin.com/gopox/1/edit
CSS:
.button {
position: relative;
display: inline-block;
border: 0;
padding: 8px 15px;
font-size: 16px;
box-sizing: border-box;
text-decoration: none;
color: #333;
font-family: sans-serif;
line-height: 1;
background:#f7f7f7;
cursor:pointer;
}
.button:before, .button:after {
content: '';
position: absolute;
left: 0;
right: 0;
border: 1px solid red;
top: 5px;
bottom: 5px;
border-top: 0;
border-bottom: 0;
}
.button:after {
left: 5px;
right: 5px;
top: 0;
bottom: 0;
border: 1px solid red;
border-left: 0;
border-right: 0;
}
.button:hover:before,
.button:hover:after {
border-color: blue;
color:blue;
}
的HTML
<a href="http://google.com" class="button">My Button</a>
<button class="button">My Button</button>