作者：沝伊 | 来源：互联网 | 2023-01-07 10:13
我遇到了一个小问题.我正在实现网站设计,需要实现一些复杂的按钮样式(附在此处).我不知道如何只使用CSS.
这将是一些按钮样式,其中一个必须具有透明背景,并且必须从放置此按钮的元素获得背景颜色.我实现了可以使用CSS设置的自定义背景按钮.但它不灵活使用.如果我想在不同的背景上使用它,你应该添加新的样式,如"btn-customColor"等.现在我有透明背景的样式,它看起来:
关键是我不能在透明背景的顶部块下切割或隐藏底部块的部分.我可以设置颜色,它就像第一张图片.但它限制了按钮的使用.我可以用btn-transparent代替btn-blue,btn-green,btn-white等.
我有另一个想法在Photoshop中绘制按钮,但这不是很好的方法,这里有很多"不".也许可以使用画布或smth来实现.像那样？如果是的话,如果您共享一些文章链接等等,那就太好了.
有工作人员可以使用:HTML,CSS,JS(jQuery).
我希望我解释了问题所在.任何想法和帮助表示赞赏.
感谢您的时间.
.btn-base {
padding: 0;
margin: 0;
height: 30px;
outline: none;
border-radius: 3px;
background: transparent;
border: 2px solid #fff;
font-size: 12px;
transition: 0.5s;
}
.btn-base>div {
position: relative;
width: 101%;
left: 3px;
bottom: 8px;
padding: 5px 15px;
outline: none;
border-radius: 3px;
background: #e4645d;
/* hardcoded code, must be transparent */
border: 2px solid #fff;
font-size: 12px;
}
1> UncaughtType..：
考虑使用伪元素作为替代解决方案.
此方法在下面嵌入的代码段中针对x3不同的背景颜色进行了演示.
代码片段演示:
.row {
padding: 20px;
}
.row:nth-child(1) {
background: #e4645d;
}
.row:nth-child(2) {
background: #5dace4;
}
.row:nth-child(3) {
background: #5fe45d;
}
.btn-base {
padding: 0;
margin: 0;
height: 30px;
outline: none;
border-radius: 3px;
background: transparent;
border: 2px solid #fff;
font-size: 12px;
transition: 0.5s;
/* added */
position: relative; /* required for absolutely positioned pseudo-elements */
padding: 0px 10px;
}
/* Additional */
.btn-base:before {
content: "";
position: absolute;
width: 7px;
height: 30px;
border: 2px solid #fff;
border-right: 0;
right: 100%;
bottom: -5px;
top: 5px;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
box-sizing: border-box;
}
.btn-base:after {
content: "";
position: absolute;
border: 2px solid #fff;
height: 9px;
border-top: 0;
border-left: 0;
right: 5px;
left: 0;
bottom: -9px;
border-bottom-right-radius: 3px;
box-sizing: border-box;
}
京公网安备 11010802041100号