如何在CSS中使用div創建一個尖箭頭

Question

如何在CSS中制作尖箭？ 不只是一個三角形而是一個帶有桿的三角形，就像傳統的箭頭一樣會被弓射出？

我試圖通過創建一個div容器來實現它，包含左右兩個容器。 右邊將包含三角形，左邊將包含三個div，其中心將被着色以創建莖。

這是我的代碼：

HTML：

<div id="main">
    <div class='arrowblock'>
        <div class='arrowright'></div>
        <div class='rectcontainer'>
            <div class='rect'></div>
            <div class='rect' style='background-color:green'>
            </div><div class='rect'>
            </div>
</div>

CSS：

.rectcontainer {
    height:30px;
    width:100px;
}

.arrowblock {
    width:130px;
    border-top: 15px solid transparent;
}
.arrowright {
float:right;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    border-left: 30px solid green;
}
.rect {
    width:100px;
    height:10px;
    background-color:transparent;
}

有沒有更簡單的方法來實現這一目標？

Answer 1

這是一個純CSS的箭頭。 所有瀏覽器都支持。 我花了不到一分鍾的時間......

在此輸入圖像描述

的jsfiddle

HTML

<div class="arrow">
  <div class="line"></div>
  <div class="point"></div>
</div>

CSS

.arrow {
    width:120px;
}

.line {
    margin-top:14px;
    width:90px;
    background:blue;
    height:10px;
    float:left;
}
.point {    
    width: 0;
    height: 0; 
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-left: 30px solid blue;
    float:right;
}

Answer 2

我創建了這個，你可以用它來指向右邊的箭頭。

在腳本中有兩個變量，widthofarrow和colorofarrow。 通過更改這些，您可以創建任何大小或顏色的箭頭。

http://jsfiddle.net/FKekh/3/

HTML：

<!DOCTYPE html>
<div id="main"></div>

CSS：

.rectcontainer {
    height:30px;
}

.arrowblock {

}
.arrowright {
float:right;
    }
.rect {
    width:100px;
    height:10px;
    background-color:transparent;
}

JAVASCRIPT：

widthofarrow=130;
colorofarrow="#345678";

$("#main").append("<div class='arrowblock'><div class='arrowright'></div><div class='rectcontainer'><div class='rect'></div><div class='rect' style='background-color:" + colorofarrow + "'></div><div class='rect'></div></div></div>");


$('.arrowblock').css('width', widthofarrow + 'px');
$('.rectcontainer').css('width', (widthofarrow - (30)) + 'px');    
$('.arrowright').css('border-top', (15) + 'px solid transparent');
$('.arrowright').css('border-bottom', (15) + 'px solid transparent');
$('.arrowright').css('border-left', (widthofarrow/4.333333333333333) + 'px solid ' + colorofarrow);

編輯

我已經更新了JoshC的優秀代碼，因此它可以用來創建不同大小和顏色的箭頭。

http://jsfiddle.net/fqcFp/2/

Answer 3

如何為箭頭使用html實體或unicode符號：

<div>&#8594;</div>

<div title="U+21A3: RIGHTWARDS ARROW WITH TAIL">↣</div>

div{
    font-size: 40px;
}

小提琴

還有更多的選擇從這里

Answer 4

再把Josh的答案放得更遠，我已經做了一個例子，根據容器調整寬度，保持純CSS。 謝謝@Josh的起點！ 我支持一些舊的瀏覽器，所以這對我有好處。 在更現代的瀏覽器中，我們可以使用transform來旋轉箭頭。 HTH

  <div class="RightArrow">
  <div class="line"></div>
  <div class="point"></div>
  </div>

  <!-- for very short arrows reduce the width of .line --> 

<style> /* style tag added so SO will syntax color please use *.css irl*/
.RightArrow {
   width:90%;
   position: relative;
}

.line {
   margin-top:8px;
   width:97%;
   background:blue;
   height:0.3em;
   float:left;
   position: absolute;
}
.point {    
   width: 0; 
   height: 0; 
   border-top: 10px solid transparent;
   border-bottom: 10px solid transparent;
   border-left: 37px solid blue;
   float:right;
}
</style>

Answer 5

要建立@josh-crozier的答案，您可以通過使用偽元素來消除大量HTML：

的jsfiddle

HTML：

<div class="arrow"></div>

CSS：

.arrow {
    position:relative;
    width:120px;
    margin:50px auto;
    height:0;
    border-bottom:10px solid blue;
}

.arrow::after { 
    content: '';
    width: 0; 
    height: 0; 
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-left: 30px solid blue;
    position: absolute;
    right: -10px;
    top: -15px;
}

使用:: before元素在行的開頭添加一個箭頭也是微不足道的： jsFiddle

如何在CSS中使用div創建一個尖箭頭

問題描述

5 個解決方案

解決方案1
26 已采納 2013-09-15 19:34:01

解決方案2
3 2013-09-15 19:18:52

解決方案3
2 2013-09-15 19:30:06

解決方案4
0 2017-06-23 15:06:08

解決方案5
0 2017-11-29 15:50:24

如何在CSS中使用div創建一個尖箭頭

問題描述

5 個解決方案

解決方案1 26 已采納 2013-09-15 19:34:01

解決方案2 3 2013-09-15 19:18:52

解決方案3 2 2013-09-15 19:30:06

解決方案4 0 2017-06-23 15:06:08

解決方案5 0 2017-11-29 15:50:24

解決方案1
26 已采納 2013-09-15 19:34:01

解決方案2
3 2013-09-15 19:18:52

解決方案3
2 2013-09-15 19:30:06

解決方案4
0 2017-06-23 15:06:08

解決方案5
0 2017-11-29 15:50:24