Html 在 CSS 中创建 V 形
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15938933/
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
creating a chevron in CSS
提问by Crystal
I'm looking at how to create a chevron (not a triangle) in CSS. Basically create icons that look like >or <.
我正在研究如何在 CSS 中创建 V 形（不是三角形）。基本上创建看起来像>或 的图标<。
On this site: http://css-tricks.com/examples/ShapesOfCSS/at the bottom, there is a chevron. However, it is pointed down. I was wondering how I can make it point right, and point left. I tried playing around with the angles, but I couldn't figure it out since I'm not really sure how these things are created anyway.
在这个站点上：http: //css-tricks.com/examples/ShapesOfCSS/在底部，有一个 V 形标志。然而，它被指出了。我想知道如何让它指向右，指向左。我试着玩弄角度，但我无法弄清楚，因为我不太确定这些东西是如何创建的。
As an aside, is this something that should be created in some drawing library like d3, or just use a div? I'm basically using this chevron to try to separate visually elements on a screen.
顺便说一句，这是应该在像 d3 这样的绘图库中创建的东西，还是只使用 div？我基本上使用这个 V 形图案来尝试分离屏幕上的视觉元素。
采纳答案by Alex W
Just do a rotate(90deg)on #chevron:
只是做一个rotate(90deg)上#chevron：
#chevron {
position: relative;
top: 100px;
text-align: center;
padding: 12px;
margin-bottom: 6px;
height: 60px;
width: 200px;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
回答by DreamTeK
Manage, create and control chevrons using CSS borders
使用 CSS 边框管理、创建和控制 V 形
Follow the notes in the example to change the results.
按照示例中的注释更改结果。
Parameters that can get altered:
可以修改的参数：
- Rotation.
- Thickness.
- Color.
- Scale.
- 回转。
- 厚度。
- 颜色。
- 规模。
.Chevron {
position:relative;
display:block;
height:50px; /*height should be double border*/
}
.Chevron::before,
.Chevron::after {
position:absolute;
display:block;
content:"";
border:25px solid transparent; /*adjust size*/
}
/*Change the four instances of 'top' below to rotate (top/right/bottom/left)*/
.Chevron::before {
top:0;
border-top-color:#b00; /*Chevron Color*/
}
.Chevron::after {
top:-10px; /*adjust thickness*/
border-top-color:#fff; /*Match background colour*/
}<i class="Chevron"></i>回答by JonShipman
p:before { content:"39"; }
p:after { content:"3A"; }
A different solution for this particular example (sans rotating and using chevron character codes)
此特定示例的不同解决方案（无旋转和使用 V 形字符代码）
回答by kevnk
Here are two other ways to make a chevron with CSS. These do not use transform or rotate so it's compatible with IE8+, but the caveat is that you have to set the color of the chevron AND the color of the background that the chevron is sitting on:
这是使用 CSS 制作 V 形图案的另外两种方法。这些不使用变换或旋转，因此它与 IE8+ 兼容，但需要注意的是，您必须设置 V 形的颜色和 V 形所在背景的颜色：
.chevron {
display:inline-block;
width: .5em;
height: .8em;
position:relative;
}
.chevron:before,
.chevron:after {
display:block;
content:"";
width:0;
height:0em;
border-style:solid;
position:absolute;
}
.chevron:before {
right:0;
border-width:.4em 0 .4em .4em;
border-color:transparent transparent transparent red;
}
.chevron:after {
left:0;
border-width:.4em 0 .4em .4em;
border-color:transparent transparent transparent #fff;
}
.chevron.skinny {
width:.4em;
}
.chevron.fat {
width:.6em;
}
.chevron {
display:inline-block;
background:red;
width: .55em;
height: .75em;
position:relative;
}
.chevron:before,
.chevron:after {
display:inline-block;
content:"";
width:0;
height:0em;
border-style:solid;
position:absolute;
}
.chevron:before {
left:0;
border-width:.4em 0 .4em .4em;
border-color:transparent transparent transparent #fff;
}
.chevron:after {
right:0;
border-width:.4em 0 .4em .4em;
border-color:#fff transparent;
}
.chevron.skinny {
width:.4em;
}
.chevron.fat {
width:.7em;
}
回答by Shruti
You can use CSS glyph ⟩ , ⟨http://css-tricks.com/snippets/html/glyphs/
您可以使用 CSS 字形⟩ , ⟨http://css-tricks.com/snippets/html/glyphs/
回答by Yenn
回答by Stevie
Another possibility not mentioned so far is an inline svg, e.g.
到目前为止还没有提到的另一种可能性是内联 svg，例如
.breadcrumb::after {
background-color: #b71c1c;
width: calc((2/9)*3em);
height: 3em;
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2 9'%3E%3Cpath d='M-.1 0L2 4.5L-.1 9Z' fill='%237f0000'/%3E%3C/svg%3E");
}
I'm not really a css guy, which may explain why I find this easier to understand and tweak than any of the other suggestions.
我不是真正的 css 专家，这可以解释为什么我觉得这比任何其他建议更容易理解和调整。
Here's a really nice tool for quickly whipping up your svg and escaping it for copy-paste into your css.
这是一个非常好的工具，可以快速生成 svg 并将其转义以复制粘贴到 css 中。
This method is also really flexible, because you can draw pretty much anything you want, and e.g. have complete control over the angle at the apex of your chevron which (I think) is not the case with the other methods here.
这种方法也非常灵活，因为您几乎可以绘制任何您想要的东西，并且例如可以完全控制人字形顶点的角度，而这里的其他方法（我认为）不是这种情况。
Another simple example:
另一个简单的例子：
.profile_menu::before {
margin-right: 0.5em;
background-color: #b71c1c;
width: calc((2/10)*3em);
height: 3em;
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' style='width:100%25; height:100%25' viewBox='0 0 2 10'%3E%3Ccircle cx='8' cy='5' r='8' fill='%237f0000'/%3E%3C/svg%3E");
}
The biggest drawback I've found so far is having to specify the fill colour in the svg. It would be nice if there's a way around this, but I didn't need it, so didn't spend too much time trying.
到目前为止，我发现的最大缺点是必须在 svg 中指定填充颜色。如果有办法解决这个问题就好了，但我不需要它，所以没有花太多时间尝试。
Note on compatibility: At time of writing it works in latest firefox (60.0.2), safari (11.1.1), and chrome (67.0.3396.87) on desktop, and chrome/safari on android/ios respectively. That's all I've tested so far.
兼容性注意事项：在撰写本文时，它分别适用于桌面上的最新 firefox (60.0.2)、safari (11.1.1) 和 chrome (67.0.3396.87) 以及 android/ios 上的 chrome/safari。这就是我迄今为止测试过的全部内容。
回答by Lisa B
Thank you Obsidian for your answer. I have converted it into a Sass mixin, so you can easily pass settings through it to generate your arrrows.
谢谢黑曜石的回答。我已将其转换为 Sass mixin，因此您可以轻松地通过它传递设置以生成箭头。
/* $class outputs the selector, do not place mixin within a rule
$dir == up, down, left or right,
$bg == background-color of arrow container
*/
@mixin arrow($class, $size, $weight, $color, $dir, $bg) {
@if $dir == up {
$dir : bottom;
}
@elseif $dir == down {
$dir : top;
}
@elseif $dir == right {
$dir : left;
}
@else {
$dir : right;
}
.#{$class} {
position:relative;
display:block;
height: $size * 2;
}
.#{$class}:before,
.#{$class}:after {
position:absolute;
display:block;
content:"";
/*Size*/
border:$size solid transparent;
}
.#{$class}:before {
#{$dir}:0;
/*Arrow Color*/
border-#{$dir}-color:$color;
}
.#{$class}:after {
/*Thickness*/
#{$dir}:-$weight;
border-#{$dir}-color:$bg;
}
}
Example usage:
用法示例：
@include arrow(arrow-right, 25px, 5px, #cecece, right, #fff);
回答by Chaya Cooper
I found all these solutions to be a bit more complicated and/or less flexible than what I was looking for (in terms of size and/or thickness), so I wanted to share the code I used. I also included a Hoverstate for use with links.
我发现所有这些解决方案都比我所寻找的（在尺寸和/或厚度方面）更复杂和/或更不灵活，所以我想分享我使用的代码。我还包括一个Hover用于链接的状态。
CSS
CSS
.chevron a:before {
border-style: solid;
border-width: 0.1em 0.1em 0 0; /* Line thickness */
content: '';
display: inline-block;
height: 5em; /* Arrow size; Height & Width must remain equal */
width: 5em;
left: 0.15em;
position: relative;
transform: rotate(-45deg);
color: #808080;
}
/* Hover State */
.chevron a:hover:before {
content: '';
color: black;
}
/* Right Arrow */
.chevron.right a:before {
left: 0;
transform: rotate(45deg);
}
/* Down Arrow */
.chevron.bottom a:before {
top: 0;
transform: rotate(135deg);
/* To position at top of element, compensate for rotation with margin-top: -2.5em; */
}
HTML
HTML
<div class="chevron right">
<a href="#" style="background-color: white;"></a>
</div>
<div class="chevron bottom">
<a href="#" style="background-color: white;"></a>
</div>
回答by Walf
CSS3-free, doing it old-school with borders:
CSS3-free，用边框做旧学校：
.chevron {
display: inline-block;
vertical-align: middle;
}
.chevron:before,
.chevron:after {
content: '';
display: block;
overflow: hidden;
height: 0;
width: 0;
border: solid black 20px;
}
.chevron.up:before,
.chevron.up:after {
border-bottom-width: 12px;
border-top-width: 0;
}
.chevron.up:before,
.chevron.down:after {
border-left-color: transparent;
border-right-color: transparent;
}
.chevron.up:after {
border-top-width: 7px;
border-bottom-color: transparent;
}
.chevron.down:before,
.chevron.down:after {
border-top-width: 12px;
border-bottom-width: 0;
}
.chevron.down:before {
border-bottom-width: 7px;
border-top-color: transparent;
}
.chevron.left:before,
.chevron.left:after,
.chevron.right:before,
.chevron.right:after {
display: inline-block;
}
.chevron.left:before,
.chevron.left:after {
border-right-width: 12px;
border-left-width: 0;
}
.chevron.left:before,
.chevron.right:after {
border-top-color: transparent;
border-bottom-color: transparent;
}
.chevron.left:after {
border-left-width: 7px;
border-right-color: transparent;
}
.chevron.right:before,
.chevron.right:after {
border-left-width: 12px;
border-right-width: 0;
}
.chevron.right:before {
border-right-width: 7px;
border-left-color: transparent;
}<span class="chevron down"></span>
<span class="chevron up"></span>
<span class="chevron right"></span>
<span class="chevron left"></span>