gpt4 book ai didi

css - 给六边形 div 一个边框

转载 作者:行者123 更新时间:2023-11-28 12:37:25 25 4
gpt4 key购买 nike

<分区>

有什么办法可以给这个六边形添加边框吗?

六边形由上(三 Angular 形)中(矩形)和下(三 Angular 形)三部分组成。

我遇到了麻烦,因为为了制作六边形的顶部和底部三 Angular 形,我必须使用“边框:透明”。

CSS:

.hex-mid {
width: 208px;
height: 120px;
background-color: #64C7CC;
}
.hex-top {
width: 0;
border-bottom: 60px solid #64C7CC;
border-left: 104px solid transparent;
border-right: 104px solid transparent;
}
.hex-bot {
width: 0;
border-top: 60px solid #64C7CC;
border-left: 104px solid transparent;
border-right: 104px solid transparent;
}

HTML:

<ul class="hexagon">
<li class="hex-top"></li>
<li class="hex-mid"></li>
<li class="hex-bot"></li>
</ul>

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