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