爲CSS繪製的箭頭的CSS陰影

我想要一個div在空間上移動時出現的箭頭here也會放下陰影。箭頭從CSS得出：爲CSS繪製的箭頭的CSS陰影

.arrow { 
position:absolute; 
margin-top:-50px; 
left:80px; 
border-color: transparent transparent transparent #ccff66; 
border-style:solid; 
border-width:20px; 
width:0; 
height:0; 
z-index:3; 
_border-left-color: pink; 
_border-bottom-color: pink; 
_border-top-color: pink; 
_filter: chroma(color=pink); 
}

陰影設置我想申請的是：

-moz-box-shadow: 1px 0px 5px #888; 
-webkit-box-shadow: 1px 0px 5px #888; 
box-shadow: 1px 0px 5px #888; 
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=0, Color='#888888')"; 
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=0, Color='#888888');

在剛剛粘貼的影子設置成箭頭的問題是，陰影適用於整個跨度框並導致框陰影而不是箭頭的陰影。

P.S.我想盡可能地嘗試不使用explorercanvas，因爲我試圖最小化html中的腳本標記。但是，如果它必須提供代碼。

來源

2011-04-05 UrBestFriend

將框陰影應用於css邊框三角形將不起作用，它將只應用於整個元素框。

你可以實現你正在試圖通過改變你的CSS邊框三角形成方形格，使用CSS3其旋轉45度做的，然後應用的box-shadow

-webkit-transform: rotate(45deg); 
-moz-transform: rotate(45deg); 
-o-transform: rotate(45deg); 
transform: rotate(45deg); 
position: absolute;

編輯： 更新

編輯： 使用CSS content和:after

請參見下面的另一種方法的鏈接

http://css-tricks.com/triangle-with-shadow/

來源

2011-04-05 09:25:40 Blowsie

+1。這可能是您使用純CSS最接近的方式。當然，它只適用於你的三角形有一個直角的角落。你還需要使用Z-index來確保旋轉的盒子在主盒子後面，但在主盒子的陰影（嗯，棘手？）前面。最後，如果你支持IE瀏覽器，那麼你已經在使用「過濾器」風格了;請注意過濾器在應用旋轉時是如何相互作用的（或不是）。 – Spudley 2011-04-05 09:49:01

哦，那是天才。 – 2011-04-05 09:49:36

此外，我不知道'BasicImage'支持45度roataions;我雖然不得不爲90/180/270以外的任何東西使用「矩陣」濾鏡。參考http://msdn.microsoft.com/en-us/library/ms532918%28v=vs.85%29.aspx但如果你有更好的鏈接，我會有興趣看到它。 – Spudley 2011-04-05 09:51:54

恐怕陰影只適用於元素框，而不是邊界角的角度。如果你想要一個這樣的帶有陰影的箭頭，恐怕你必須把它作爲一個PNG圖像，並在圖像中使用陰影。

CSS通常只生產方形盒子。在CSS中製作一個尖箭頭的邊界技巧是一個聰明的黑客攻擊。

來源

2011-04-05 09:16:31

感謝Blowsie的原始答案，讓我接下來的實現。這是Chrome的working jsfiddle implementation。有關CSS：

/* Make an arrow */ 
.arrow{ 
    background-color: pink; 
    box-shadow: 3px 3px 4px #000; 
    width: 30px; 
    height: 30px; 

    /* Translate the box up by width/2 then rotate */ 
    -webkit-transform: translateY(-15px) rotate(45deg); 
}

買者

如果框的內容重疊的箭頭，然後幻覺被打破。您可以嘗試通過將箭頭的z-index更改爲框的後面來解決此問題，但這會導致框陰影渲染在箭頭的頂部。將足夠的填充添加到框內容，以便不會發生這種情況。

來源

2012-04-12 19:51:23

我沒有測試過其他的瀏覽器，但我注意到，CSS Arrow Please使用一個整潔的小把戲

使用父盒這個語法也將一個陰影效果添加到生成的「箭頭」：

-webkit-filter: drop-shadow(0 1px 4px rgba(0,0,0,0.3));

但是使用這種語法不會？：

-webkit-box-shadow: 2px 3px 8px 0px rgba(0, 0, 0, 0.04);

來源

2013-03-03 17:12:34 ProVega

工作得很好..... – Fergus 2013-04-02 03:02:20

另一種方式來實現箭頭的陰影，這將爲所有的瀏覽器工作在統一使用HTML字符的三角形。

HTML：

<span class="arrow">▶</span>

CSS：

.arrow { 
    color: red; 
    text-shadow: 0 0 20px black; 
    transform: scaleY(1.4) 
}

，因爲這是呈現爲普通的文本，你可以應用文字陰影財產。用於自定義箭頭尺寸（希望添加額外的寬度或高度或傾斜箭頭）css3變換屬性是關鍵。這裏是參考html字符：http://www.copypastecharacter.com/graphic-shapes 享受

來源

2015-10-29 11:26:26

爲CSS繪製的箭頭的CSS陰影

回答

相關問題