與陰影CSS3箭頭

嘿目前我有這個CSS製作一個css箭頭，但我似乎無法得到它陰影與陰影CSS3箭頭

.arrow { 
    width: 0px; 
    height: 0px; 
    border-style: solid inset; 
    border-width: 10px 78px 0 78px; 
    border-color: #000 transparent transparent transparent; 
    z-index: 1; 
}

我已經涉足與任何想法：後：之前，但與沒有成功

來源

2014-01-10 Johan Rheeder

上個月爲了我自己的工作，我花了幾個小時和幾個小時在這方面工作，而且那裏正在蹲下。我需要它作爲推薦框，而不是我這樣做：http://jsbin.com/OjexExa/1/edit。 – Christina

由於您的箭頭是怎麼回事了堅實的矩形下放置，這可以幫助你

.demo { 
    position: absolute; 
    top: 50px; 
    left: 0px; 
    width: 200px; 
    height: 50px; 
    clip: rect(0px 400px 100px 0px);  
} 
.demo:after { 
    content: ""; 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    width: 100%; 
    height: 100%; 
    background-color: black; 
    -webkit-transform: translate(-90px, -45px) skew(80deg) rotate(-5deg); 
    -moz-transform: translate(-90px, -45px) skew(80deg) rotate(-5deg); 
    transform: translate(-90px, -45px) skew(80deg) rotate(-5deg); 
    box-shadow: 30px 1px 6px blue; 
}

fiddle compared with your original arrow

的問題是，陰影不能去向上，但通常這種設計止跌」無論如何都需要。

此外，基本div被高度扭曲，因此您需要通過反覆試驗來設置陰影。

來源

2014-01-10 20:03:43 vals