html - 为三 Angular 形 div 创建阴影

Question

如何为三 Angular 形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 标签创建三 Angular 形阴影？

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