我正在制作一个网站,导航需要一个透明的箭头,并看到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

最佳答案

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

09-11 19:02
查看更多