2013-12-12 135 views
0

我正在製作一個網站,我的導航需要一個透明的箭頭,並看到div下方的投影。帶陰影的透明箭頭內部

我需要在純HTML/CSS(沒有JavaScript)的獨奏。

期望的結果:


Desired result


這是我試了一下(我把三角形的紅色看到它,如果顯示放透明無)

.box { 
    position:relative; 
    display:block; 
    height:100px; 
    width:100%;  
    box-shadow: 0px 5px 5px rgba(50, 50, 50, 0.75); 
} 

.box:after { 
    content:""; 
    display:inline-block; 
    position:absolute; 
    border: 15px solid; 
    margin-left: -15px; 
    height: 0; 
    width: 0; 
    left:50%; 
    border-color:transparent transparent red transparent; 
    bottom: 0; 
} 

jsFiddle

+0

是否將三角形的顏色設置爲與陰影相同的陰影/灰色alpha值,而不是正確的結果? –

回答

2

您可以使用兩個僞元素和transforms

demo

相關CSS:

.box:before, .box:after { 
    content: ""; 
    position: absolute; 
    top: 100%; 
    width: 50%; height: 1em; 
    transform-origin: 100% 0; 
    transform: skewX(-45deg); 
    background: inherit; 
} 

.box:after { 
    right: 0; 
    transform-origin: 0 0; 
    transform: skewX(45deg); 
} 

Support is pretty good。支持box-shadow的瀏覽器也支持2D轉換。

+0

太棒了。非常感謝。 – L105

+0

嘿,你回來了!我喜歡你的帖子,我想念他們! – vals