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

Question

我正在使用 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

Answer 1

您只需交换 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，形成一个等边三 Angular 形。

.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>