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 的箭头。由所有浏览器提供支持。我花了不到一分钟的时间......

enter image description here

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

<强> FIDDLE

还有更多选择here

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>

如何在CSS中使用div创建一个尖箭头

4 个答案: