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：

对输入图像应用阴影效果。 投影实际上是以特定颜色绘制的输入图像的alpha蒙版的模糊偏移版本，在图像下方合成。该函数接受<shadow>类型的参数（在CSS3中定义）背景），但不允许使用inset关键字。此函数类似于更成熟的box-shadow属性;不同之处在于，使用过滤器时，某些浏览器会提供硬件加速以获得更好的性能。

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>

Answer 2

遗憾的是，在使用border时，使用box-shadow黑客无效。

CSS

相反，您需要使用css transform来旋转元素并隐藏overflow。您将需要使用伪元素。

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

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

帆布

var canvas = document.getElementById('triangle');
var context = canvas.getContext('2d');

context.beginPath();
context.moveTo(25, 10);
context.lineTo(40, 40);
context.lineTo(10, 40);
context.lineTo(25, 10);

context.closePath();
context.shadowColor = "rgba(0, 0, 0, 0.4)";
context.shadowBlur = 7;
context.shadowOffsetX = 2;
context.shadowOffsetY = 5;
context.fillStyle = "rgba(132, 28, 255, 0.8)";
context.fill();

<canvas id="triangle" height="50" width="50">Triangle</canvas>

SVG

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="svg-triangle" width="50" height="50" viewBox="0 0 100 100">
  <filter id="dropshadow" height="130%">
    <feGaussianBlur in="SourceAlpha" stdDeviation="5" />
    <!-- stdDeviation is how much to blur -->
    <feOffset dx="0" dy="0" result="offsetblur" />
    <!-- how much to offset -->
    <feMerge>
      <feMergeNode/>
      <!-- this contains the offset blurred image -->
      <feMergeNode in="SourceGraphic" />
      <!-- this contains the element that the filter is applied to -->
    </feMerge>
  </filter>
  <polygon points="50,10 90,90 10,90" style="filter:url(#dropshadow)" />
</svg>

Answer 3

尝试这种方式

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

DEMO

用于css的框阴影生成箭头

3 个答案:

CSS

帆布

SVG