Html 如何使用 CSS 制作花式箭头？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27492191/
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 to Make A Fancy Arrow Using CSS?
提问by Tommay
Ok, so everyone knows you can make a triangle using this:
好的，所以每个人都知道你可以用这个来制作一个三角形：
#triangle {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
}
And that produces a solid, filled in triangle. But how would you make a hollow-type arrow-like triangle, like this?
这会产生一个实心的三角形填充。但是你会如何制作一个像这样的空心箭头状三角形呢？
采纳答案by GolezTrol
You can use the beforeor afterpseudo-element and apply some CSS to it. There are various ways. You can add both beforeand after, and rotate and position each of them to form one of the bars. An easier solution is adding two borders to just the beforeelement and rotate it using transform: rotate.
您可以使用beforeorafter伪元素并向其应用一些 CSS。有多种方式。您可以添加before和after，并旋转和定位它们中的每一个以形成一个条形。一个更简单的解决方案是为before元素添加两个边框并使用transform: rotate.
Scroll down for a different solution that uses an actual element instead of the pseuso elements
向下滚动以获得使用实际元素而不是伪元素的不同解决方案
In this case, I've added the arrows as bullets in a list and used emsizes to make them size properly with the font of the list.
在这种情况下，我已将箭头作为项目符号添加到列表中，并使用em大小使它们的大小与列表的字体相符。
ul {
list-style: none;
}
ul.big {
list-style: none;
font-size: 300%
}
li::before {
position: relative;
/* top: 3pt; Uncomment this to lower the icons as requested in comments*/
content: "";
display: inline-block;
/* By using an em scale, the arrows will size with the font */
width: 0.4em;
height: 0.4em;
border-right: 0.2em solid black;
border-top: 0.2em solid black;
transform: rotate(45deg);
margin-right: 0.5em;
}
/* Change color */
li:hover {
color: red; /* For the text */
}
li:hover::before {
border-color: red; /* For the arrow (which is a border) */
}<ul>
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
<li>Item4</li>
</ul>
<ul class="big">
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
<li>Item4</li>
</ul>Of course you don't need to use beforeor after, you can apply the same trick to a normal element as well. For the list above it is convenient, because you don't need additional markup. But sometimes you may want (or need) the markup anyway. You can use a divor spanfor that, and I've even seen people even recycle the ielement for 'icons'. So that markup could look like below. Whether using <i>for this is right is debatable, but you can use span for this as well to be on the safe side.
当然，您不需要使用beforeor after，您也可以将相同的技巧应用于普通元素。对于上面的列表，它很方便，因为您不需要额外的标记。但有时您可能想要（或需要）标记。您可以使用 adiv或span，我什至看到人们甚至回收i“图标”元素。因此该标记可能如下所示。使用<i>它是否正确是有争议的，但是为了安全起见，您也可以为此使用 span。
/* Default icon formatting */
i {
display: inline-block;
font-style: normal;
position: relative;
}
/* Additional formatting for arrow icon */
i.arrow {
/* top: 2pt; Uncomment this to lower the icons as requested in comments*/
width: 0.4em;
height: 0.4em;
border-right: 0.2em solid black;
border-top: 0.2em solid black;
transform: rotate(45deg);
}And so you can have an <i class="arrow" title="arrow icon"></i> in your text.
This arrow is <i class="arrow" title="arrow icon"></i> used to be deliberately lowered slightly on request.
I removed that for the general public <i class="arrow" title="arrow icon"></i> but you can uncomment the line with 'top' <i class="arrow" title="arrow icon"></i> to restore that effect.If you seek more inspiration, make sure to check out this awesome library of pure CSS icons by Nicolas Gallagher. :)
如果您寻求更多灵感，请务必查看Nicolas Gallagher 的这个很棒的纯CSS 图标库。:)
回答by Alan Dunning
This can be solved much easier than the other suggestions.
这可以比其他建议更容易解决。
Simply draw a square and apply a borderproperty to just 2 joining sides.
只需绘制一个正方形并将border属性应用于仅 2 个连接边。
Then rotate the square according to the direction you want the arrow to point, for exaple: transform: rotate(<your degree here>)
然后根据您希望箭头指向的方向旋转正方形，例如： transform: rotate(<your degree here>)
.triangle {
border-right: 10px solid;
border-bottom: 10px solid;
height: 30px;
width: 30px;
transform: rotate(-45deg);
}<div class="triangle"></div>回答by Roko C. Buljan
Responsive arrows
响应箭头
they resizeautomatically with your textand are coloredthe same color. Plug and play :)
jsBin demo playground
他们调整你的自动文本，并彩色相同的颜色。即插即用 :)
jsBin 演示游乐场
body{
font-size: 25px; /* Change font and see the magic! */
color: #f07; /* Change color and see the magic! */
}
/* RESPONSIVE ARROWS */
[class^=arr-]{
border: solid currentColor;
border-width: 0 .2em .2em 0;
display: inline-block;
padding: .20em;
}
.arr-right {transform:rotate(-45deg); -webkit-transform:rotate(-45deg);}
.arr-left {transform:rotate(135deg); -webkit-transform:rotate(135deg);}
.arr-up {transform:rotate(-135deg); -webkit-transform:rotate(-135deg);}
.arr-down {transform:rotate(45deg); -webkit-transform:rotate(45deg);}This is <i class="arr-right"></i> .arr-right<br>
This is <i class="arr-left"></i> .arr-left<br>
This is <i class="arr-up"></i> .arr-up<br>
This is <i class="arr-down"></i> .arr-down回答by Danield
Here's a different approach:
这是一种不同的方法：
1) Use the multiplication character: ××
1) 使用乘法符：××
2) Hide half of it with overflow:hidden
2）用它隐藏一半 overflow:hidden
3) Then add a triangle as a pseudo element for the tip.
3）然后添加一个三角形作为提示的伪元素。
The advantage here is that no transforms are necessary. (It will work in IE8+)
这里的优点是不需要转换。（它将在 IE8+ 中工作）
.arrow {
position: relative;
}
.arrow:before {
content: '×';
display: inline-block;
position: absolute;
font-size: 240px;
font-weight: bold;
font-family: verdana;
width: 103px;
height: 151px;
overflow: hidden;
line-height: 117px;
}
.arrow:after {
content: '';
display: inline-block;
position: absolute;
left: 101px;
top: 51px;
width: 0;
height: 0;
border-style: solid;
border-width: 25px 0 25px 24px;
border-color: transparent transparent transparent black;
}<div class="arrow"></div>回答by Gildas.Tambo
Just use beforeand afterPseudo-elements - CSS
*{box-sizing: border-box; padding: 0; margin: 0}
:root{background: white; transition: background .3s ease-in-out}
:root:hover{background: red }
div{
margin: 20px auto;
width: 150px;
height: 150px;
position:relative
}
div:before, div:after{
content: '';
position: absolute;
width: 75px;
height: 20px;
background: black;
left: 40px
}
div:before{
top: 45px;
transform: rotateZ(45deg)
}
div:after{
bottom: 45px;
transform: rotateZ(-45deg)
}<div/>回答by web-tiki
An other approach using bordersand no CSS3properties :
另一种使用边框而不使用CSS3属性的方法：
div, div:after{
border-width: 80px 0 80px 80px;
border-color: transparent transparent transparent #000;
border-style:solid;
position:relative;
}
div:after{
content:'';
position:absolute;
left:-115px; top:-80px;
border-left-color:#fff;
}<div></div>回答by nicael
>itself is very wonderful arrow! Just prepend a div with it and style it.
>本身就是很奇妙的箭！只需在它前面添加一个 div 并为其设置样式。
div{
font-size:50px;
}
div::before{
content:">";
font: 50px 'Consolas';
font-weight:900;
}<div class="arrowed">Hatz!</div>回答by vinayakj
Left Right Arrow with hover effect using Roko C. Buljan box-shadow trick
使用 Roko C. Buljan box-shadow 技巧具有悬停效果的左右箭头
.arr {
display: inline-block;
padding: 1.2em;
box-shadow: 8px 8px 0 2px #777 inset;
}
.arr.left {
transform: rotate(-45deg);
}
.arr.right {
transform: rotate(135deg);
}
.arr:hover {
box-shadow: 8px 8px 0 2px #000 inset
}<div class="arr left"></div>
<div class="arr right"></div>回答by Mostafa
I needed to change an inputto an arrow in my project. Below is final work.
我需要input在我的项目中将 an更改为箭头。下面是最终作品。
#in_submit {
background-color: white;
border-left: #B4C8E9;
border-top: #B4C8E9;
border-right: 3px solid black;
border-bottom: 3px solid black;
width: 15px;
height: 15px;
transform: rotate(-45deg);
margin-top: 4px;
margin-left: 4px;
position: absolute;
cursor: pointer;
}<input id="in_submit" type="button" class="convert_btn">Here Fiddle
这里小提琴
回答by bob
.arrow {
display : inline-block;
font-size: 10px; /* adjust size */
line-height: 1em; /* adjust vertical positioning */
border: 3px solid #000000;
border-left: transparent;
border-bottom: transparent;
width: 1em; /* use font-size to change overall size */
height: 1em; /* use font-size to change overall size */
}
.arrow:before {
content: "<div>
here are some arrows
<div class='arrow left'></div> space
<div class='arrow right'></div> space
<div class='arrow top'></div> space
<div class='arrow bottom'></div> space with proper spacing?
</div>
a0"; /* needed to hook line-height to "something" */
}
.arrow.left {
margin-left: 0.5em;
-webkit-transform: rotate(225deg);
-moz-transform: rotate(225deg);
-o-transform: rotate(225deg);
-ms-transform: rotate(225deg);
transform: rotate(225deg);
}
.arrow.right {
margin-right: 0.5em;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.arrow.top {
line-height: 0.5em; /* use this to adjust vertical positioning */
margin-left: 0.5em;
margin-right: 0.5em;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.arrow.bottom {
line-height: 2em;
/* use this to adjust vertical positioning */
margin-left: 0.5em;
margin-right: 0.5em;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-o-transform: rotate(135deg);
-ms-transform: rotate(135deg);
transform: rotate(135deg);
}Similar to Roko C, but a little more control over size and placement.
类似于 Roko C，但对大小和位置的控制更多一些。
