为三角形div创建阴影

Question

我们如何为三角形div创建阴影？这是我正在尝试的代码

HTML

 <div id="triangle-down"></div>

CSS

 #triangle-down {
     width: 0;
     height: 0;
     border-left: 50px solid transparent;
     border-right: 50px solid transparent;
     border-top: 100px solid red;
     box-shadow: 1px 1px 5px #000;
 }

此代码为div标签创建方形阴影。现在我们如何为这个div标签创建三角形阴影？

Answer 1

Method 1

HTML

<div class="triangle-with-shadow"></div>

CSS

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

---

Method 2

HTML

<span class="triangle">▼</span>

CSS

.triangle {
    color:red;
    font-size:100px;
    text-shadow: 0 0px 10px black;
}

Answer 2

另一种选择，绝对是更好的选择，是使用filter: drop-shadow();。

这将模仿制作过滤器的形状，我不开玩笑就是将它模仿成发球台。这不仅会跟随对象，还会跟随对象上的伪元素。

以下是CSS：

#triangle-down {
     width: 0;
     height: 0;
     border-left: 50px solid transparent;
     border-right: 50px solid transparent;
     border-top: 100px solid red;
     filter: drop-shadow(0 5px 10px black);
     -webkit-filter: drop-shadow(0 5px 10px black);
     -moz-filter: drop-shadow(0 5px 10px black);
     -o-filter: drop-shadow(0 5px 10px black);
     -ms-filter: drop-shadow(0 5px 10px black);
}

常规问题Fiddle。

---

使用伪元素Fiddle

#triangle-down {
    width: 300px;
    height: 200px;
    background: red;
    position: relative;
    filter: drop-shadow(0 5px 10px black);
     -webkit-filter: drop-shadow(0 5px 10px black);
     -moz-filter: drop-shadow(0 5px 10px black);
     -o-filter: drop-shadow(0 5px 10px black);
     -ms-filter: drop-shadow(0 5px 10px black);
} 

#triangle-down:before {
    content: "";
     width: 0;
     height: 0;
     border-left: 15px solid transparent;
     border-right: 15px solid transparent;
     border-top: 30px solid red;
     position: absolute;
     top: 100%;
     left: 50%;
 }

---

Filter information

主要考虑是浏览器支持，目前Webkit是唯一受支持的浏览器。