css 生成箭头的框阴影

Question

我正在使用以下代码在 css 中创建 up 箭头：

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

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

注意：-我不想使用任何图像，它应该与 CSS.

Answer 1

试试这个方法

    .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

Answer 2

遗憾的是，使用 border hack 在使用 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>

Canvas

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

单一-属性 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-only，但是应该在 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>

css 生成箭头的框阴影

Box shadow for css generated arrow

html

css

css-shapes

CSS

Canvas

SVG