如何使用css製作右尖箭頭

我使用CSS創建了一些自定義形狀我想繪製一個箭頭，其指針位於右側，並與div左對齊，實際上我製作了一個箭頭，指針指向左邊，但我很難製作箭頭指向右側的箭頭。這裏是一個圖片我怎麼想它
arrow 如何使用css製作右尖箭頭

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

來源

2017-01-02 uneeb meer

https://jsfiddle.net/jjbftxzs/3/ –

這將做到這一點：https://jsfiddle.net/jjbftxzs/4/ – pol

你只需要調換左/右值你的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>

來源

2017-01-02 17:02:00

不錯的一個！我試圖用你的方式做到這一點！反正謝謝.. :) –

看看這裏，我做到了（在紅色箭頭做出這樣它會更容易看到）：

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

來源

2017-01-02 17:07:29 Mifort

如何使用css製作右尖箭頭

回答

相關問題