Question

我想在图像的右侧添加三角形箭头，图像有border-radius：50％我通过为箭头添加第二个div并将其移动到我想要的位置来制作它，但是如何在不使用第二个div的情况下正确制作它。

它看起来如何： https://jsfiddle.net/kani339/0xeu28q5/1/

HTML：

<img src="https://www.aviary.com/img/photo-landscape.jpg" class="photo">
<div class="arrow"></div>

CSS：

.photo {
  border-radius:50%;
  width: 200px;
    height: 190px;
    border: 5px solid #41454f;
}

.arrow {
  position:relative;
  left:205px;
  bottom: 115px;
  width: 0; 
  height: 0; 
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
  border-left: 15px solid #41454f;
}

Answer 1

我认为你在寻找像伪元素这样的东西？通过使用伪元素，我们可以将附加元素附加到元素。此功能允许您在不写第二个<div>的情况下使用其他元素。

以下示例使用伪元素:before到.photo元素。但请注意，此功能不适用于<img>代码，因此您需要将图片用作背景。看看下面的演示

.photo {
  border-radius:50%;
  width: 200px;
  height: 190px;
  border: 5px solid #41454f;
  background: url("https://www.aviary.com/img/photo-landscape.jpg") no-repeat center center / cover;
  background-position: initial;
  position: relative;
}

.photo::before {
  content: "";
  position: absolute;
  right: -15px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
  border-left: 15px solid #41454f;
}

<div class="photo"></div>

Answer 2

我不确定纯CSS解决方案。

你可以用jQuery来做，像这样：

fn

Here's a demo

Credit to Christopher Harris

如何将箭头添加到图像

2 个答案: