gpt4 book ai didi

带边框和圆 Angular 的 CSS3 六边形按钮

转载 作者:技术小花猫 更新时间:2023-10-29 11:09:02 27 4
gpt4 key购买 nike

我有一张图片,它的形状很奇怪:带边框和圆 Angular 的扁平六边形。我想用 CSS 来实现。
我尝试使用 CSS 来实现它,以便它可以动态扩展更长的文本,但它对我不起作用。

这是图片

Hexagonal button with rounded corners and border

最佳答案

CSS:

您可以使用 2 个 3d 转换的伪元素实现此形状:

div {
display: inline-block;
position: relative;
padding: 20px 50px;
perspective: 30px;
}
div:after,div:before {
content: '';
position: absolute;
top: 0;
width: 100%; height: 100%;
z-index: -1;
background: orange;
border: 2px solid darkorange;
box-sizing: border-box;
}
div:before {
right: 50%;
transform-origin: 100% 0;
transform: rotateY(-10deg);
border-radius: 10px 0 0 10px;
border-width: 3px 0 3px 5px;
}
div:after {
left: 50%;
transform-origin: 0 0;
transform: rotateY(10deg);
border-radius: 0 10px 10px 0;
border-width: 3px 5px 3px 0;
}
body{text-align:center;}
<div>some text</div><br/><br/>
<div>some longer text</div>

请注意,您需要添加适当的供应商前缀以最大限度地支持浏览器。参见 canIuse了解更多信息。


SVG:

另一种选择是将内联 svg 与多边形元素一起使用:

div{
display:inline-block;
position:relative;
padding:20px 50px;
}
svg{
position:absolute;
top:0; left:0;
z-index:-1;
min-width:100%; min-height:100%;
}
<div class="btn">
some text
<svg viewbox="0 0 100 30">
<polygon points="2 8 50 2 98 8 98 22 50 28 2 22" stroke-linejoin="round" stroke-width="2" stroke="darkorange" fill="orange" />
</svg>
</div>
<div class="btn">
some longer text
<svg viewbox="0 0 100 30">
<polygon points="2 8 50 2 98 8 98 22 50 28 2 22" stroke-linejoin="round" stroke-width="2" stroke="darkorange" fill="orange" />
</svg>
</div>

关于带边框和圆 Angular 的 CSS3 六边形按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30257139/

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