在图像上创建CSS箭头（不使用边框）

Question

在图像上创建CSS箭头（不使用边框）

3

我正在尝试找到一种方法，将箭头附加到标头图像底部，就像这样。我已经看过了很多使用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;
 }

我正在尝试找到一种在没有其他图像的情况下创建该掩模形状的方法，除了主要艺术品。有人实现过这样的效果吗？如果有任何想法，将不胜感激。

- Nate

1

这并不是一件容易的事情...也许用图片来解决会更容易。如果你从某个网站上得到了这个例子，我可以查看他们的源代码并告诉你他们是如何做的。 - John Riselvato

我理解你的意思是想使用CSS3添加箭头，但不使用边框属性或额外的图像。 - Nek

基本上我不能使用边框，因为那会使箭头成为实心颜色。我也不想使用另一张图片，因为我的页眉（全宽）会随着窗口调整大小，如果它变大了，箭头就会变得像素化...我想保持它的清晰度，所以我想知道是否可能使用CSS3添加一个箭头形状的遮罩。 - Nate

你可以尝试使用SVG。 - Kalnode

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Ana · Accepted Answer

如果您正在寻找一个能够随着图片大小调整的箭头，那么是可以做到的。

演示

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: '';
}