三角形周圍的CSS盒子陰影

我需要使用簡單的html和css創建帶陰影的三角形。通過另一個stackoverflow問題回答，我能夠創建帶有斜邊的三角形。基本上，我創建了一個箱子的1個側具有很寬的邊框，並用寬透明邊框附近的一面：三角形周圍的CSS盒子陰影

div.triangle { 
    border-bottom : 60px solid transparent; 
    border-left : 60px solid black; 
}

的偉大工程，但是當我嘗試應用的box-shadow影子是繞着封閉廣場...不是三角形：

div.triangle { 
    border-bottom : 60px solid transparent; 
    border-left : 60px solid black; 
    -webkit-box-shadow: 0 0 10px black; 
}

如何僅使用帶陰影的css/html獲取三角形？

來源

2011-03-16 at.

我的建議是：使用的圖像。我不認爲這是可能的。 – 2011-03-16 22:03:38

@Drackir，我希望我不必...... – 2011-03-16 22:05:49

那麼，它會更簡單，跨瀏覽器兼容。 :) – 2011-03-16 22:07:13

似乎不可能。絕對使用想象是更簡單的解決方案。我做了一些像三角形:) http://jsfiddle.net/5dw8M/109/。抱歉，不能在您的帖子下留言。可能它會像某人的靈感一樣起作用;

來源

2011-03-16 22:21:53 ted

你的三角形真的是一個四分之一圈...對於我的目的我不能使用它。 – 2011-03-16 23:09:51

我基於這個答案創建了一些東西，所以我給你這個 – 2011-03-17 11:21:28

@at的功勞：你做了什麼？我有興趣知道。 – Marcel 2011-03-17 14:01:41

如何把另一個具有類似屬性的div與玩職位？類似http://jsfiddle.net/eveevans/JWGTw/

來源

2011-03-16 22:22:41 eveevans

問題是投影陰影必須完全銳利，陰影根本不模糊。 – 2011-03-16 23:08:51

這對我來說很有效，但至少我現在可以擁有透明陰影。圖像不能做到這一點。 – deweydb 2014-10-09 03:58:37

將<canvas>與PNG回退是一個選項？

演示：jsfiddle.net/Marcel/3dbzm/1

來源

2011-03-16 23:09:04 Marcel

我不想使用畫布，但看起來這可能是我唯一的選擇。 – 2011-03-16 23:11:23

創建三角形的副本，它脫色，使用CSS給它一個負z索引值，最後關閉與CSS定位中心它。

div.triangle { 
z-index:-1; 
position:relative; 
bottom:-16px; 
right:-16px; 
}

來源

2011-03-16 23:15:49

這與eveevans的回答不一樣嗎？ – 2011-03-16 23:16:50

您可以使用「轉換」屬性來旋轉一個正方形45度和隱藏的一半，但並不是所有的瀏覽器都支持它，所以你需要一個備用。

.triangle-with-shadow { 
    width: 100px; 
    height: 50px; 
    position: relative; 
    overflow: hidden; 
    box-shadow: 0 16px 10px -15px rgba(0,0,0,0.5); 
} 
.triangle-with-shadow:after { 
    content: ""; 
    position: absolute; 
    width: 50px; 
    height: 50px; 
    background: #999; 
    transform: rotate(45deg); 
    -ms-transform:rotate(45deg); /* IE 9 */ 
    -moz-transform:rotate(45deg); /* Firefox */ 
    -webkit-transform:rotate(45deg); /* Safari and Chrome */ 
    -o-transform:rotate(45deg); /* Opera */ 
    top: 25px; 
    left: 25px; 
    box-shadow: -1px -1px 10px 0px rgba(0,0,0,0.5); 
}

Demo on jsfiddle.

從this CSS Tricks page擡升與修改。

來源

2012-10-30 22:28:43 thebossman

但您可以使用此解決方案編輯三角形的高度。這只是等邊三角形。 – yosafatade 2013-01-09 21:13:29

@yosafatade你可以嘗試'scale（2，1）'來拉伸三角形......？ – Druzion 2016-03-01 20:15:45

也許是最好的選擇是使用filter：

filter: drop-shadow(0 0 10px black);

來源

2017-12-18 00:29:08 Mayko

三角形周圍的CSS盒子陰影

回答

相關問題