使用css创建的三角形的框阴影答案

【问题标题】：Box shadow to triangle created using css使用css创建的三角形的框阴影
【发布时间】：2015-10-19 08:00:54
【问题描述】：

我有以下plunker，我在其中使用 CSS 创建了一个三角形。

CSS：

.triangle {
    border: inset 6px;
    content: "";
    display: block;
    height: 0;
    width: 0;
    border-color: transparent transparent red transparent;
    border-bottom-style: solid;
    position: absolute;
    top: 50px;
    left: 50px;
    z-index: 89;
}

HTML：

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

在我的 AngularJS 项目中，当我调用定义为 here. 的下拉指令时会创建这个三角形

问题是我想给这个三角形和下拉菜单一个盒子阴影。我可以将它应用到弹出窗口（本质上只是一个“ul”列表），但我正在努力处理三角形。如何将框阴影应用到三角形？

【问题讨论】：

-webkit-filter: drop-shadow for other browsers的可能重复

标签： html css angularjs box-shadow angular-foundation

【解决方案1】：

.triangle {
  position: relative;
  margin: 0;
  box-sizing: border-box;
  background: red;
  box-shadow: 0px 3px 3px 0 rgba(0, 0, 0, 0.4);
}
.triangle::after {
  content: "";
  position: absolute;
  top: 50px;
  left: 50px;
  width: 0;
  height: 0;
  box-sizing: border-box;
  border: 6px solid black;
  border-color: transparent transparent red red;
  transform-origin: 0 0;
  transform: rotate(-45deg);
  box-shadow: -3px 3px 3px 0 rgba(0, 0, 0, 0.4);
}

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

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

</html>

这里是创建所需效果的 HTML 和 CSS。

【讨论】：

干得好，使用旋转来破解当前 CSS 的限制。赞！

【解决方案2】：

由于三角形实际上是一个 hack（块元素的四个边框中的三个是透明的）， box-shadow 属性将无法按预期工作，因为它仍然会将您应用此“hack”的元素视为矩形，因此相应地应用了 box-shadow。

结果在this fiddle。

.triangle:before {
    border: inset 6px;
    content: "";
    display: block;
    height: 0;
    width: 0;
    border-color: transparent transparent red transparent;
    border-bottom-style: solid;
    position: absolute;
    top: 50px;
    left: 50px;
    z-index: 89;
    box-shadow: 0px 0px 2px 2px #AAA;
}

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

【讨论】：