【问题标题】：CSS arrow on an image (without using borders)图像上的 CSS 箭头（不使用边框）
【发布时间】：2013-02-17 19:29:13
【问题描述】：

我正在尝试找出一种方法，将箭头附加到标头图片的底部，like this。我已经看到了许多关于如何使用 CSS3 创建箭头的方法，但我发现它们几乎总是使用边框属性来实现它。通常是这样的：

#demo {
   width: 100px;
   height: 100px;
   background-color: #ccc;
   position: relative;
   border: 4px solid #333;
 }

#demo:after {
   border-width: 9px;
   border-left-color: #ccc;
   top: 15px;
 }

我正在尝试找到一种方法来创建这种面具形状，除了主要艺术之外没有任何图像。有没有人做到这一点？如果有人有任何想法，将不胜感激。

【问题讨论】：

没有一个简单的方法可以做到这一点......可能只是更容易用图像来解决它。如果您从网站上获得该示例，我可以查看他们的来源并告诉您他们做了什么。
我理解你的意思吗？您想使用 css3 添加箭头，但不使用边框属性或其他图像。
是的，基本上我不能使用边框，因为这会使箭头变成纯色。我也不想使用其他图像，因为我的标头（全宽）会随窗口调整大小，如果放大，箭头会变得像素化。我想让它保持清晰，所以我想知道这是否可能使用 CSS3 添加箭头形遮罩。
您可以使用 SVG 进行探索。

标签： css mask css-shapes pseudo-element

【解决方案1】：

如果您正在寻找随图像调整大小的箭头，那么可以。

DEMO

HTML：

<div class='head'></div>
<div class='arrow'></div>

CSS：

.head {
  margin: 0 auto;
  width: 0; height: 0;
  /* take into account ratio of the image but with 20% less for the height */
  padding: 12.5% 30%;
  background: url(background.jpg);
  background-size: cover;
}
.arrow {
  overflow: hidden;
  position: relative;
  margin: -4.9% auto;
  padding: 4.42%; /* 25% of head's padding * sqrt(2) */
  width: 0;
  transform: rotate(45deg);
  background: red;
}
.arrow:after {
  position: absolute;
  bottom: 50%; left: 50%;
  margin: -70.71%; /* half of the width or height */
  width: 141.42%; height: 141.42%; /* sqrt(2)*141.42% */
  transform: rotate(-45deg);
  background: url(background.jpg) 50% 100%;
  background-size: 480% 250%; /* take into account ratio of the image */
  content: '';
}

【讨论】：

我在演示中只看到一个白屏；有人确认吗？