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，形成等边三角形。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

看看我做了它（并用红色箭头使其更容易看到）：

.arrow {
    position: relative;
    padding: 20px;
}
.arrow::after {
    position: absolute;
    z-index: 200;
    content: '';
    width: 0;
    height: 0;
    left: 20px;
    border-style: solid;
    border-width: 22px 0 22px 17px;
    border-color: transparent transparent transparent red;
    bottom: 62px;
}

如何使用css制作一个右箭头

2 个答案: