箱子陰影轉爲使用css創建的三角形

我有以下plunker，我使用CSS創建了一個三角形。箱子陰影轉爲使用css創建的三角形

CSS：

.triangle { 
    border: inset 6px; 
    content: ""; 
    display: block; 
    height: 0; 
    width: 0; 
    border-color: transparent transparent red transparent; 
    border-bottom-style: solid; 
    position: absolute; 
    top: 50px; 
    left: 50px; 
    z-index: 89; 
}

HTML：

<div class="triangle"> 
</div>

在我AngularJS項目，當我把一個下拉指令定義here.

問題是創建這個三角形是我想給這個三角形和下拉popu p箱陰影。我可以將它應用於彈出窗口（實質上只是一個'ul'列表），但我正在與三角形掙扎。我如何將盒子陰影應用於三角形？

來源

2015-10-19 Tarun Dugar

的可能的複製[-webkit濾波器：下拉陰影其他瀏覽器（http://stackoverflow.com/questions/21133763/webkit-filter-drop-shadow-for - 其他瀏覽器） – Pete

請通過接受答案或評論他們來澄清爲什麼你還沒有接受任何答案，請跟進你的問題。 – klaar

.triangle { 
 
    position: relative; 
 
    margin: 0; 
 
    box-sizing: border-box; 
 
    background: red; 
 
    box-shadow: 0px 3px 3px 0 rgba(0, 0, 0, 0.4); 
 
} 
 
.triangle::after { 
 
    content: ""; 
 
    position: absolute; 
 
    top: 50px; 
 
    left: 50px; 
 
    width: 0; 
 
    height: 0; 
 
    box-sizing: border-box; 
 
    border: 6px solid black; 
 
    border-color: transparent transparent red red; 
 
    transform-origin: 0 0; 
 
    transform: rotate(-45deg); 
 
    box-shadow: -3px 3px 3px 0 rgba(0, 0, 0, 0.4); 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
    <head> 
 
    <link rel="stylesheet" href="style.css"> 
 
    <script src="script.js"></script> 
 
    </head> 
 

 
    <body> 
 
    <div class="triangle"> 
 
     
 
    </div> 
 
    </body> 
 

 
</html>

這裏是HTML和CSS創建所需的效果。

來源

2015-10-19 08:20:57 Enkode

不錯的工作，使用循環來破解當前CSS的侷限性。 Kuddos！ – klaar

@Tarun我提供了一個很好的答案，它是你正在尋找的解決方案？ – Enkode

對不起，遲到的迴應，它工作正常。 –

-1

由於三角形實際上是一種黑客（塊元素的四個邊框中的三個是透明的），因此box-shadow屬性將無法按預期工作，因爲它仍然會看到您應用此「黑客」作爲矩形，所以相應地應用了箱形陰影。

結果在this fiddle。

.triangle:before { 
 
    border: inset 6px; 
 
    content: ""; 
 
    display: block; 
 
    height: 0; 
 
    width: 0; 
 
    border-color: transparent transparent red transparent; 
 
    border-bottom-style: solid; 
 
    position: absolute; 
 
    top: 50px; 
 
    left: 50px; 
 
    z-index: 89; 
 
    box-shadow: 0px 0px 2px 2px #AAA; 
 
}

<div class="triangle"> 
 
     
 
    </div>

來源

2015-10-19 08:21:24 klaar

箱子陰影轉爲使用css創建的三角形

回答

相關問題