里面透明箭头与投影

Question

我正在制作一个网站，我的导航需要一个透明箭头，并看到div下面的阴影。

我需要一个纯HTML / CSS（没有javascript）的解决方案。

期望的结果：

---

---

这是我尝试的内容（我把三角形用红色看，如果显示透明没有显示）

.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

Answer 1

您可以使用两个伪元素和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变换。