html - css 生成箭头的框阴影

Question

我使用以下代码在 css 中创建向上箭头:

border-bottom: 10px solid red;
border-left: 10px solid transparent;
border-right: 10px solid transparent

我还想将 box-shadow 应用到箭头而不是它周围的矩形框 ( FIDDLE )。这样可以吗？

注意:-我不想使用任何图像，它应该使用 CSS。

Answer 1

单属性纯 CSS 解决方案

box-shadow属性可能不适用于 border-triangle-hack，但仍然有一个单一属性的解决方案:投影过滤器。

.shadow {
  filter: drop-shadow(0 0 2px #000);
  -webkit-filter: drop-shadow(0 0 2px #000);
  /* webkit browsers still need the vendor prefix */
}

来自MDN :

Applies a drop shadow effect to the input image. A drop shadow is effectively a blurred, offset version of the input image's alpha mask drawn in a particular color, composited below the image. The function accepts a parameter of type <shadow> (defined in CSS3 Backgrounds), with the exception that the inset keyword is not allowed. This function is similar to the more established box-shadow property; the difference is that with filters, some browsers provide hardware acceleration for better performance.

drop-shadow 的参数过滤器的格式与 box-shadow 的值相同属性(虽然它不能制作嵌入阴影)。 CSS-Tricks有一篇描述 CSS 过滤器的很棒的文章。

Browser support不错，但是 webkit 浏览器仍然(截至撰写本文时)需要供应商前缀。目前，这两条线将覆盖全局约75%的用户。

下面是一个稍微更稳健的解决方案，它仍然是纯 CSS，但应该在 IE5.5+、FF31+ 和 webkit 浏览器(Chrome、Safari、Opera 等)中工作，让您的用户覆盖率非常接近 100%。

.triangle {
  border-bottom: 10px solid red;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
}

.shadow {
  /* inline svg-filter-fix for Firefox 31 - 33 */
  filter: url('data:image/svg+xml;utf8,<svg height="0" width="0" xmlns="http://www.w3.org/2000/svg"><filter id="drop-shadow"><feGaussianBlur in="SourceAlpha" stdDeviation="2.2"/><feOffset dx="0" dy="0" result="offsetblur"/><feFlood flood-color="#000"/><feComposite in2="offsetblur" operator="in"/><feMerge><feMergeNode/><feMergeNode in="SourceGraphic"/></feMerge></filter></svg>#drop-shadow');
  /* standard syntax, currently only supported by Firefox 34+ */
  filter: drop-shadow(0px 0px 2px #000);
  /* webkit syntax, currently supports about 66% of browsers */
  -webkit-filter: drop-shadow(0px 0px 2px #000);
  /* syntax for IE5.5 - IE7 */
  filter: progid:DXImageTransform.Microsoft.Shadow(Strength=1, offX=0px, offY=0px, Color='#000000');
  /* syntax for IE8+ */
  -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=1, offX=0px, offY=0px, Color='#000000')";
}

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