向六角形類添加發光效果

我目前正試圖圍繞用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>

來源

2017-10-15 Kohila

目的是控制你的形狀的圓弧有一個固定的陰影hexagone或者你想特別解決這一個？ –

一般爲六角形。從我所看到的情況來看，用CSS類創建一個平底六邊形要困難得多，特別是當你想要像我這樣的一個挖空填充時。 – Kohila

您可以在元素中添加更多的填充和調整圓角半徑。所有的線將穿越和半徑將固定形狀：

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

你當然也可以通過同時改變填充和邊界半徑

來源

2017-10-15 13:31:41

優秀！有沒有什麼辦法可以讓這個工作沒有角落重疊比其餘的輝光具有更高的不透明度？（如果沒有，那麼不用擔心，我可以肯定地這樣做。） – Kohila

是的，我也在考慮這種更高的不透明度......通過減少paddin和半徑來控制它。你可以使用這些值，直到你使「更高的opcity」小於實際值 –

向六角形類添加發光效果

回答

相關問題