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

Question

How can I make a pointy arrow in CSS? 如何在CSS中制作尖箭？ Not just a triangle but one with a stem, like a traditional arrow that would be fired from a bow? 不只是一个三角形而是一个带有杆的三角形，就像传统的箭头一样会被弓射出？

I'm trying to do it by creating a div container, containing two containers, left and right. 我试图通过创建一个div容器来实现它，包含左右两个容器。 The right will contain the triangle, and the left will contain three divs, the centre of which will be colored to create the stem. 右边将包含三角形，左边将包含三个div，其中心将被着色以创建茎。

Here's my code: 这是我的代码：

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

Is there a simpler way to achieve this? 有没有更简单的方法来实现这一目标？

Answer 1

Here is an arrow with pure CSS . 这是一个纯CSS的箭头。 Supported by all browsers. 所有浏览器都支持。 It took me less than a minute to make.. 我花了不到一分钟的时间......

在此输入图像描述

jsFiddle 的jsfiddle

HTML HTML

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

CSS 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

I've created this, which you can use for an arrow that points to the right. 我创建了这个，你可以用它来指向右边的箭头。

In the script are two variables, widthofarrow and colorofarrow. 在脚本中有两个变量，widthofarrow和colorofarrow。 By changing these you can create an arrow of any size or color. 通过更改这些，您可以创建任何大小或颜色的箭头。

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

HTML: HTML：

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

CSS: CSS：

.rectcontainer {
    height:30px;
}

.arrowblock {

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

JAVASCRIPT: 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);

EDIT 编辑

I've updated JoshC's great code so it can be used to create arrows of different sizes and colors. 我已经更新了JoshC的优秀代码，因此它可以用来创建不同大小和颜色的箭头。

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

Answer 3

How about just using a html entity or unicode symbol for your arrow: 如何为箭头使用html实体或unicode符号：

<div>&#8594;</div>

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

div{
    font-size: 40px;
}

FIDDLE 小提琴

There are more to choose from here 还有更多的选择从这里

Answer 4

Taking Josh's answer a bit further I have made an example that adjusts width based on the container keeping it pure CSS. 再把Josh的答案放得更远，我已经做了一个例子，根据容器调整宽度，保持纯CSS。 Thanks @Josh for the starting point! 谢谢@Josh的起点！ I support some older browsers so this is good for me. 我支持一些旧的浏览器，所以这对我有好处。 We could use transform to rotate the arrow as we like it in more modern browsers. 在更现代的浏览器中，我们可以使用transform来旋转箭头。 HTH 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

To build on @josh-crozier's answer, you can eliminate a lot of the HTML by using pseudo-elements instead: 要建立@josh-crozier的答案，您可以通过使用伪元素来消除大量HTML：

jsFiddle 的jsfiddle

HTML: HTML：

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

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

To add an arrow at the start of the line using the ::before element is trivial also: jsFiddle 使用:: 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