Question

嘿，目前我有这个css来生成一个css箭头，但我似乎无法在它上面留下任何想法的阴影

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

我已经涉足过：之前和之前但没有成功

Answer 1

由于您的箭头将放置在实心矩形下，这可以帮助您

.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高度失真，因此您需要通过反复试验来设置阴影。

Answer 2

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

我认为这就是你要找的东西，它解释了两种用CSS在箭头上获得阴影的方法。

一个是使用unicode三角形字符并对其应用阴影，另一个是使用CSS trickery和：after选择器和CSS转换。

带投影的css3箭头

2 个答案: