图像上的 CSS 箭头（不使用边框）

Question

我正在尝试找出一种方法，将箭头附加到标头图像的底部，像这样。我见过很多关于如何使用 CSS3 创建箭头的方法，但我发现它们几乎总是使用 border 属性来实现它。通常是这样的：

#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;
 }

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

Answer 1

演示

2024年答案

现在，这可以只是

clip-path

元素上的简单

img

。

<img src='aurora.jpg' alt='aurora' class='arrow-tip-img'>

和

$arrow-h: Min(4em, 15%);
$arrow-w: 3em;

.arrow-tip-img {
    clip-path: 
        polygon(0 0, 100% 0, 
            100% calc(100% - #{$arrow-h}), 
            calc(50% + #{$arrow-w}) calc(100% - #{$arrow-h}), 
            50% 100%, 
            calc(50% - #{$arrow-w}) calc(100% - #{$arrow-h}), 
            0 calc(100% - #{$arrow-h}))
}

现场片段：

.arrow-tip-img {
  clip-path: 
    polygon(0 0, 100% 0, /* top points */
      100% calc(100% - min(4em, 15%)), /* right bottom */
      calc(50% + 3em) calc(100% - min(4em, 15%)), /* arrow base */
      50% 100%, /* arrow tip */
      calc(50% - 3em) calc(100% - min(4em, 15%)), /* arrow base */
      0 calc(100% - min(4em, 15%)))  /* left bottom */
}

<img src='https://images.unsplash.com/photo-1566345984367-fa2ba5cedc17?w=300' alt='aurora' class='arrow-tip-img'>

2013 年答案，保留为网络历史记录

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

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