Fatal编程技术网
  • css/
  • Css 如何使用尖三角形为下拉列表提供阴影？

Css 如何使用尖三角形为下拉列表提供阴影？

css

Css 如何使用尖三角形为下拉列表提供阴影？,css,Css,我想给你一些阴影，让你可以用尖尖的空气动力下降。 阴影可以很好地使用下拉菜单，但不知何故无法将其应用于指针 .dropdown{ position: absolute !important; width: 310px;height: 70%; padding: 0px; background-color: @light-color; -webkit-border-radius: @border-radius; -moz-border-radius:

我想给你一些阴影，让你可以用尖尖的空气动力下降。 阴影可以很好地使用下拉菜单，但不知何故无法将其应用于指针

.dropdown{
    position: absolute !important;
    width: 310px;height: 70%;
    padding: 0px;
    background-color: @light-color;
    -webkit-border-radius: @border-radius;
    -moz-border-radius: @border-radius;
    border-radius: @border-radius;
    top: 44px;left: 44px;z-index: 9999;
    box-shadow: 0 0 3px 0 #aaa;
}

.dropdown:after{
    content: '';
    position: absolute;
    border-style: solid;
    border-width: 0 14px 14px;
    border-color: #f4f5f4 transparent;
    display: block;width: 0;
    z-index: 999;top: -14px;left: 25px;
    box-shadow: 0px 0px 1px #000;
}
所以你有两种方法来实现你想要的：

首先使用unicode字符：

HTML:

<div class="unicode">&#9650;</div>

<div class="triangle"></div>
第二步，在之后使用伪元素
添加旋转div并在父级内部裁剪它们：

HTML:


<div class="unicode">&#9650;</div>



<div class="triangle"></div>


考虑添加所有前缀以增强浏览器兼容性


演示：
这是一个演示小提琴，你的JSFIDLE中没有三角形。暂时我把它改成了红色。请现在检查。[链接]（）@Jay那把小提琴在三角形周围有一个方形阴影，没有帮助