CSSを使って右向きの矢印を作る方法

Question

私はCSSを使ってカスタムシェイプを作成しています。ポインタが右側にあり、divに左寄せされている矢印を描きたいと思います。左にはポインタが右側にある矢印を作るのが難しいです。 は、ここで私がしたいかの絵だ、それはここに私のhtmlコード arrow

だ

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

あなただけの左/右の値を交換するために必要な

.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

CSSあなたのborderルールの矢印を反対方向に向けるようにするn。これに

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

：

この変更後、

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

そして、あなたの例のイメージに合うように、私は正三角形を形成し、また18pxする30px側を変更しました。

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