我目前正尝试在使用 CSS 类创建的六边形周围添加统一的发光效果,但由于六边形的绘制方式,发光效果最终出现奇怪的中断,我似乎无法修复。
.hexagon {
position: relative;
border-radius: 5px;
height: 125px;
width: 75px;
margin: 50px;
box-sizing: border-box;
border: 5px solid transparent;
border-top-color: black;
border-bottom-color: black;
display: inline-block;
}
.hexagon:before, .hexagon:after {
content: "";
border: inherit;
position: absolute;
top: -5px;
left: -5px;
background: inherit;
border-radius: inherit;
height: 100%;
width: 100%;
}
.hexagon:before {
transform: rotate(60deg);
}
.hexagon:after {
transform: rotate(-60deg);
}
.hexagon:hover, .hexagon:hover:before, .hexagon:hover:after {
box-shadow: 0 10px 2px -2px rgba(255,0,0,0.5), 0 -10px 2px -2px rgba(255,0,0,0.5);
}
<div class=hexagon></div>
最佳答案
您可以在元素内添加更多的内边距并调整边框半径。所有的线都会交叉,半径会固定形状:
.hexagon {
position: relative;
border-radius: 20px;
padding: 40px;
height: 125px;
width: 75px;
margin: 50px;
box-sizing: border-box;
border: 5px solid transparent;
border-top-color: black;
border-bottom-color: black;
display: inline-block;
}
.hexagon:before,
.hexagon:after {
content: "";
border: inherit;
position: absolute;
top: -5px;
left: -5px;
background: inherit;
border-radius: inherit;
height: 100%;
width: 100%;
}
.hexagon:before {
transform: rotate(60deg);
}
.hexagon:after {
transform: rotate(-60deg);
}
.hexagon:hover,
.hexagon:hover:before,
.hexagon:hover:after {
box-shadow: 0 10px 2px -2px rgba(255, 0, 0, 0.5), 0 -10px 2px -2px rgba(255, 0, 0, 0.5);
}
<div class=hexagon></div>
当然你可以通过同时改变 padding 和 border-radius 来控制形状的半径
关于html - 为六边形类添加发光效果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46755454/