带阴影的三角形

您可能已经知道可以使用 CSS 创建三角形。 但是，如果您想在其后面添加阴影怎么办？ 不幸的是，经典的边框技巧不会改变元素的形状，它只是一个视觉技巧。 让我们看看几个替代解决方案。

直接使用 Unicode

Unicode 中有三角形字符。 例如

▲▼◀▶

还有 更多。

如果将其用作三角形，则可以选择它并对其进行各种花哨的处理。

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

.triangle {
  color: #BADA55;
  text-shadow: 0 0 20px black;
}

颜色、阴影、大小，等等。 您甚至可以变得更花哨。 如果三角形不是您想要的精确形状或指向错误的方向，则可以使用 CSS3 变换功能将其拉伸或旋转。 这是一个类似的演示

查看 Chris Coyier 在 CodePen 上编写的笔 myomvM（@chriscoyier）。

我喜欢这种技术，但有一些显而易见的问题。 一个是依赖 CSS3 变换功能无法获得非常广泛的浏览器支持。 当然不支持 IE 8。 但是，这篇文章是关于阴影的，因此无论如何都是 CSS3。 比这更旧的浏览器也可能无法处理 Unicode 图标本身。 所以请注意。

双盒方法

假设我们对 CSS3 满意，一种方法是使用一个具有隐藏溢出的容器框，以及一个在其内部旋转并悬挂在容器框外的另一个框。 仍然可见的部分将形成一个三角形。 然后，您可以在两个框上使用 box-shadow 以在整个周围实现阴影。

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

.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); /* Prefixes... */
  top: 75px;
  left: 25px;
  box-shadow: -1px -1px 10px -2px rgba(0, 0, 0, 0.5);
}

请注意，我们在父级中使用负扩散半径，以便阴影仅从一侧发出。 这是一个类似的演示

查看 Chris Coyier 在 CodePen 上编写的笔 带阴影的三角形（@chriscoyier）。

直接使用图像

我不太喜欢这种方法，因为它是一个额外的 HTTP 请求或在您的精灵中需要管理的另一件事。 并且您将拥有“响应式图像”（除非您准备了多个版本并尽最大努力进行修复，否则在像素密集型显示器上看起来不太好）。 其他技术本质上是用矢量绘制的，因此在任何环境中都将保持清晰。

但是，没有人会因此而死亡，并且您将获得良好的浏览器支持。

未来

您将能够使用 filter: drop-shadow() 非常轻松地为形状投下阴影。 这是一篇关于它的文章。