如何在CSS中使用div制作尖箭头

Question

如何在CSS中使用div制作尖箭头

javascriptjquerycsshtml

9

如何在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;
}

有没有更简单的方法实现这个？

- Dicky Moore

1

有时候，使用一张好的老式图片也是可以的。 - Matt R. Wilson

1

如果你在谷歌上搜索“CSS箭头”，你会发现很多文章都解释了如何实现它。 - leoMestizo

我已经更新了这个问题，并提供了一段我认为可以改进的代码。 - Dicky Moore

1

@leoMestizo，如果你在谷歌上搜索“CSS箭头”，你会得到很多文章向你展示如何使用CSS制作三角形。我特别指出我的问题并不是寻找这样的内容，而是要寻找一个带有柄的箭头。如果很容易的话，请给我提供相应的谷歌搜索结果。 - Dicky Moore

5个回答

9

在@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

- Codemonkey

5

你可以考虑使用HTML实体或Unicode符号来表示箭头：

<div>&#8594;</div>

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

div{
    font-size: 40px;
}

FIDDLE

这里还有更多可供选择的箭头符号，请点击此处

- Danield

好主意，但是这种方式下你无法控制箭头的大小。 - Avatar

3

我已经创建了一个箭头，指向右边。

在脚本中有两个变量，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/

- Dicky Moore

1

借鉴Josh的回答，我制作了一个示例，可以根据容器调整宽度，保持纯CSS。感谢@Josh提供的起点！由于我支持一些旧版浏览器，因此这对我很有用。在更现代的浏览器中，我们可以使用transform来旋转箭头。希望对你有帮助。

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

- Joe Johnston

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Josh Crozier · Accepted Answer

这里有一枚纯css制作的箭头，可以在所有浏览器中使用。我只用了不到一分钟时间来制作它。

输入图片说明

jsFiddle

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

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