css - 如何使用CSS制作右箭头

我正在使用CSS创建一些自定义形状，我想绘制一个箭头，该箭头的指针在右侧并与div对齐，我实际上制作了一个箭头，该指针在左侧，但是我在制作箭头时遇到了困难其指针在右侧。
这是我想要的照片
arrow

这是我的html代码

<div class="arrow">
   <img style="width:70%" src="https://i.imgsafe.org/a842cd10d7.png" class="img-responsive">
</div>

的CSS

.arrow {
    position: relative;
}

.arrow::after {
    position: absolute;
    content: '';
    width: 0;
    height: 0;
    left: 0;
    border-style: solid;
    border-width: 18px 30px 18px 0;
    border-color: transparent #fff transparent transparent;
    bottom: 45px;
}

FIDDLE

最佳答案

您只需要交换border规则的左/右值，以使箭头朝向相反的方向。

更改此：

border-width: 18px 30px 18px 0;
border-color: transparent #fff transparent transparent;

对此：

border-width: 18px 0 18px 30px;
border-color: transparent transparent transparent #fff;

然后为了匹配您的示例图像，我将30px边也更改为18px，形成了一个等边三角形。

.arrow {
  position: relative;
}
.arrow::after {
  position: absolute;
  content: '';
  width: 0;
  height: 0;
  left: 0;
  border-style: solid;
  border-width: 18px 0 18px 18px;
  border-color: transparent transparent transparent #fff;
  bottom: 45px;
}

<div class="arrow">
  <img style="width:70%" src="https://i.imgsafe.org/a842cd10d7.png" class="img-responsive">
</div>

关于css - 如何使用CSS制作右箭头，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/41430563/