六角形にグロー効果を追加

Question

現在、CSSクラスで作成された六角形の周りに一様なグロー効果を追加しようとしていますが、六角形の描画方法により、グロー効果は修正できないような奇妙な折れ線で終わります。

.hexagon { 
 
\t position: relative; 
 
\t border-radius: 5px; 
 
\t height: 125px; 
 
\t width: 75px; 
 
\t margin: 50px; 
 
\t box-sizing: border-box; 
 
\t border: 5px solid transparent; 
 
\t border-top-color: black; 
 
\t border-bottom-color: black; 
 
\t display: inline-block; 
 
} 
 
.hexagon:before, .hexagon:after { 
 
\t content: ""; 
 
\t border: inherit; 
 
\t position: absolute; 
 
\t top: -5px; 
 
\t left: -5px; 
 
\t background: inherit; 
 
\t border-radius: inherit; 
 
\t height: 100%; 
 
\t width: 100%; 
 
} 
 
.hexagon:before { 
 
\t transform: rotate(60deg); 
 
} 
 
.hexagon:after { 
 
\t transform: rotate(-60deg); 
 
} 
 
.hexagon:hover, .hexagon:hover:before, .hexagon:hover:after { 
 
\t 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>

Answer 1

あなたは要素の内部より多くのパディングを追加して、国境半径を調整することができます。すべてのラインが交差すると半径が形状を固定します：

.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>

あなたは、もちろん目的は同時にパディングとボーダー半径