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

有没有更简单的方法来实现这一点？

4

5 回答 5

38

这是一个纯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>

于 2013-09-15T19:34:01.187 回答
4

为您的箭头使用 html 实体或 unicode 符号怎么样：

<div>&#8594;</div>

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

div{
    font-size: 40px;
}

小提琴

这里还有更多选择

于 2013-09-15T19:30:06.807 回答
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/

于 2013-09-15T19:18:52.067 回答
3

要以@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

于 2017-11-29T15:50:24.827 回答
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>
于 2017-06-23T15:06:08.483 回答