jQuery 如何在 CSS 中制作带有 div 的尖箭头
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18816486/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I make a pointy arrow with a div in CSS
提问by Dicky Moore
How can I make a pointy arrow in CSS? Not just a triangle but one with a stem, like a traditional arrow that would be fired from a bow?
如何在 CSS 中制作尖箭头？不只是一个三角形，而是一个带茎的，就像传统的弓箭一样？
I'm trying to do it by creating a div container, containing two containers, left and right. 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 容器来做到这一点，其中包含两个容器，左右。右侧将包含三角形，左侧将包含三个 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?
有没有更简单的方法来实现这一目标？
回答by Josh Crozier
Here is an arrow with pure CSS. Supported by allbrowsers. It took me less than a minute to make..
这是一个带有纯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;
}<div class="arrow">
<div class="line"></div>
<div class="point"></div>
</div>回答by Dicky Moore
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. By changing these you can create an arrow of any size or color.
在脚本中有两个变量，widthofarrow 和 colorofarrow。通过更改这些，您可以创建任何大小或颜色的箭头。
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:
爪哇脚本：
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 的很棒的代码，所以它可以用来创建不同大小和颜色的箭头。
回答by Danield
回答by Joe Johnston
Taking Josh's answer a bit further I have made an example that adjusts width based on the container keeping it pure CSS. Thanks @Josh for the starting point! 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. HTH
进一步考虑 Josh 的回答，我做了一个示例，该示例根据容器保持纯 CSS 来调整宽度。感谢@Josh 的起点！我支持一些较旧的浏览器，所以这对我有好处。我们可以使用变换来旋转箭头，因为我们在更现代的浏览器中喜欢它。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>
回答by Codemonkey
To build on @josh-crozier's answer, you can eliminate a lot of the HTML by using pseudo-elements instead:
为了建立在@josh-crozier 的回答之上，您可以通过使用伪元素来消除大量 HTML：
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
