Question

我想用尖头空气动力学给下拉一些阴影。阴影在下拉列表中运行良好，但不知何故无法将其应用于指针。

.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;
}

Answer 1

所以你有两种方法可以实现你想要的目标：

首先使用unicode caractere：

HTML：

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

CSS：

.unicode {
   color: #999;
   text-shadow: 0 0 10px rgba(0,0,0,0.5);
   font-size:3em;
}

第二次使用伪元素after添加一个旋转div并将其裁剪在父级内：

HTML：

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

CSS：

.triangle {
   width: 100px;
   height: 100px;
   position: relative;
   overflow: hidden;
   box-shadow: 0 16px 10px -17px rgba(0,0,0,0.5);
}
.triangle::after {
   content: "";
   position: absolute;
   width: 50px;
   height: 50px;
   background: #999;
   transform: rotate(45deg);
   top: 75px;
   left: 25px;
   box-shadow: 0 0 10px rgba(0,0,0,0.5);
}

考虑添加所有前缀以获得更多浏览器兼容性

DEMO：http://jsfiddle.net/j4hcev21/3

如何用尖头三角形给下拉阴影？

1 个答案: