gpt4 book ai didi

css - 具有透明度且只有虚线边框的按钮形状

转载 作者:行者123 更新时间:2023-11-28 03:04:17 24 4
gpt4 key购买 nike

是否能够创建具有透明背景和虚线边框且具有自定义形状的按钮?

transparent button with dotted border

我现在可以使用背景颜色来执行此操作,但是当我尝试在没有任何颜色的情况下填充内部时,没有任何效果如预期的那样。

body{
background: #999
}
button {
height: 50px;
width: 250px;
border: dotted 1px #FFF;
border-bottom: none;
background: none;
position: relative;
}
button:after,
button:before {
content: '';
display: block;
position: absolute;
top: 100%;
width: 0;
height: 0;
border-style: solid;
}

button:after {
border-color: #fff transparent transparent transparent;
border-width: 1px 125px 0 0;
right: 1px
}

button:before {
border-color: transparent transparent #fff transparent;
border-width: 0 125px 1px 0;
left: 0
}
<body>
<button></button>
</body>

最佳答案

我不太确定按钮,但您当然可以用 div 创建形状。

您正在寻找的是用边框来创建形状的游戏。

#triangle{
width: 0;
height: 0;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
border-bottom: 40px solid green;
}
<div id="triangle"></div>

如您所见,我创建了一个只有边框的三 Angular 形,诀窍是理解 div 的边框。它们不是直的,末端是楔形的。

我认为这对您来说是一个很好的起点。

关于css - 具有透明度且只有虚线边框的按钮形状,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46020616/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com