2010-01-17 133 views
2

我已經創建了一個本質上大的箭頭指向右側。下載CSS三角形陰影

<div style=" 
font-size: 0px; line-height: 0%; width: 100px; 
border-bottom: 80px solid #8cb622; 
border-right: 62px solid #dadbdf; 
"></div> 


<div style=" 
font-size: 0px; line-height: 0%; width: 100px; 
border-top: 80px solid #8cb622; 
border-right: 62px solid #dadbdf; 
"></div> 

現在我知道這不是「正確的」,但我現在只是在測試。

我想知道是否有一種方法可以使用此邊框技術,並且仍然以某種方式在箭頭的底部邊緣放置投影。我正在考慮在其下放置另一個div,但爲了使這種技術起作用,其他邊框需要可見。

如果這不能使用邊界技術完成,我不得不使用圖像作爲這個箭頭的前面。

感謝

回答

0

您可能需要考慮使用Canvas來做到這一點,該平臺非常適合與MSIE兼容的ExplorerCanvas跨平臺工作(當然在WebKit & Gecko中本地支持)。

+0

嗯,畫布標籤看起來可能會有所訣竅。我對這個標籤沒有經驗,因此可能需要一些學習。 – user103219 2010-01-17 01:31:58

0

我相信這是box-shadow但很可能會承擔它的工作原理包裝盒上的型號和可能不會計算在邊界創建的幾何。

+0

不幸的是,它似乎做了整個div,因爲我有點期待。 – user103219 2010-01-17 01:21:53