如何解决有什么方法可以向剪贴路径css添加边框吗?
我正努力复制下图所示的按钮样式。我已经尝试过使用剪切路径,但是在可见边框和半透明背景的情况下却无法获得预期的效果。
有一个简单的解决方法吗?
https://i.stack.imgur.com/kI5eX.png
解决方法
您使用clip-path
的想法应该可以解决。这是一种方法
a {
position: relative;
display: inline-block;
padding: 10px 20px;
background-color: rgba(255,.3);
box-shadow: inset 0 0 0 3px red;
clip-path: polygon(0 0,calc(100% - 20px) 0,100% 20px,100% 100%,20px 100%,0 calc(100% - 20px));
}
a:before,a:after {
content: '';
position: absolute;
width: 3px;
height: 30px;
background-color: red;
}
a:before {
left: 0;
top: 100%;
transform-origin: 50% 0%;
transform: translateY(-20px) rotate(-45deg);
}
a:after {
right: 0;
bottom: 100%;
transform-origin: 50% 100%;
transform: translateY(20px) rotate(-45deg);
}
<a href="">Start my free session</a>
此解决方案的唯一问题是对clip-path
https://caniuse.com/?search=clip-path
这是一个Codepen https://codepen.io/Hornebom/pen/912d2557034ba9c3936a06ced8584de4
,要获得此图像的精确副本,背景必须是svg图像。
但是只要您的背景扎实,您就可以使用CSS这样的技巧
button {
background-color: #bb000077;
border: 2px solid #ff6666;
font-weight: bold;
color: #fff;
font-size: 20px;
padding: 15px 25px;
position: relative;
outline: none;
}
button::before,button::after {
content: '';
pointer-events: none;
position: absolute;
width: 29px;
height: 29px;
background-color: #fff;
transform: rotate(45deg);
}
button::after {
top: -16px;
right: -16px;
border-bottom: 2px solid #ff6666;
}
button::before {
bottom: -16px;
left: -16px;
border-top: 2px solid #ff6666;
}
<button>Start my free session</button
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。