如何使用CSS制作右箭頭

Question

我正在使用CSS創建一些自定義形狀，我想繪制一個箭頭，該箭頭的指針在右側並與div對齊，我實際上制作了一個箭頭，該指針在左側，但是我在制作箭頭時遇到了困難其指針在右側。 這是我想要的照片
箭頭

這是我的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;
}

小提琴

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 ，形成了一個等邊三角形。

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

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