我正在研究如何在 CSS 中创建人字形（不是三角形）。基本上创建看起来像>或的图标<。
在这个网站上：http ://css-tricks.com/examples/ShapesOfCSS/在底部，有一个人字形。但是，它被指向下方。我想知道如何让它指向右边，指向左边。我试着玩弄角度，但我无法弄清楚，因为我不确定这些东西是如何创建的。
顺便说一句，这是应该在像 d3 这样的绘图库中创建的东西，还是只使用 div？我基本上是在使用这个人字形来尝试在屏幕上分离视觉元素。
问问题
92289 次
13 回答
19
使用 CSS 边框管理、创建和控制 V 形
按照示例中的说明更改结果。
可以更改的参数：
- 回转。
- 厚度。
- 颜色。
- 规模。
.chevron {
position:relative;
display:block;
height:50px; /*Height should be double border thickness*/
}
.chevron::before,
.chevron::after {
position:absolute;
display:block;
content:"";
border:25px solid transparent; /*Adjust chevron size*/
}
/*Change the four instances of 'top' below to rotate chevron*/
/*Use (top/right/bottom/left) where you want the back of the chevron to be*/
.chevron::before {
top:0;
border-top-color:#b00; /*Chevron Color*/
}
.chevron::after {
top:-10px; /*Adjust thickness*/
border-top-color:#fff; /*Match chevron background colour*/
}<i class="chevron"></i>于 2014-07-09T10:50:33.100 回答
18
p:before { content:"\2039"; }
p:after { content:"\203A"; }
此特定示例的不同解决方案（无旋转和使用人字形字符代码）
于 2014-06-06T16:36:09.107 回答
14
只需执行以下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);
}
于 2013-04-11T01:04:46.270 回答
9
这里有另外两种用 CSS 制作人字形的方法。这些不使用变换或旋转，因此它与 IE8+ 兼容，但需要注意的是，您必须设置雪佛龙的颜色和雪佛龙所在的背景颜色：
.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;
}
于 2013-07-15T20:14:01.013 回答
5
这是右 V 形的简单 CSS 实现。您正在 :after 伪元素的两侧创建一个边框，并通过 rotate() 函数将其旋转 45 度。
.container:after {
content: ' ';
display: inline-block;
border-bottom: 1px solid #f00;
border-right: 1px solid #f00;
height: 10px;
width: 10px;
transform: rotate(-45deg);
}<div class="container"></div>于 2020-12-21T18:22:12.647 回答
4
您可以使用 CSS 字形⟩ , ⟨
http://css-tricks.com/snippets/html/glyphs/
于 2013-04-11T01:09:14.417 回答
2
是这么长的代码所以我做了这个小提琴
基本上是使用伪选择器 :before制作的:after
于 2013-04-11T01:03:16.747 回答
2
到目前为止未提及的另一种可能性是内联 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");
}
我不是一个真正的 CSS 人，这可以解释为什么我发现这比任何其他建议更容易理解和调整。
这是一个非常好的工具，可以快速生成您的 svg 并将其转义以复制粘贴到您的 css 中。
这种方法也非常灵活，因为您几乎可以绘制任何您想要的东西，例如可以完全控制您的人字形顶点的角度，（我认为）这里的其他方法不是这样。
另一个简单的例子：
.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");
}
到目前为止，我发现的最大缺点是必须在 svg 中指定填充颜色。如果有办法解决这个问题会很好，但我不需要它，所以没有花太多时间尝试。
兼容性注意事项：在撰写本文时，它适用于桌面上的最新版 firefox (60.0.2)、safari (11.1.1) 和 chrome (67.0.3396.87)，以及 android/ios 上的 chrome/safari。这就是我到目前为止测试的所有内容。
于 2018-06-29T08:33:45.523 回答
1
谢谢黑曜石的回答。我已经将它转换成一个 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;
}
}
示例用法：
@include arrow(arrow-right, 25px, 5px, #cecece, right, #fff);
于 2015-08-26T14:24:51.473 回答
1
我发现所有这些解决方案都比我想要的更复杂和/或更不灵活（在尺寸和/或厚度方面），所以我想分享我使用的代码。我还包括了一个Hover与链接一起使用的状态。
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
<div class="chevron right">
<a href="#" style="background-color: white;"></a>
</div>
<div class="chevron bottom">
<a href="#" style="background-color: white;"></a>
</div>
于 2016-03-09T16:33:31.513 回答
0
如果您不反对使用现有的解决方案，FontAwesome 在图标字体中有这个和其他字形，您可以在标记中利用：http: //fortawesome.github.io/Font-Awesome/#icon/icon-chevron -下
您可以这样使用它（在按照说明包含所需文件之后）：
<i class="icon-chevron-down"></i>
于 2013-04-11T00:52:33.000 回答
0
好的，所以我需要能够在不重复 ID 的情况下重复使用雪佛龙。. .所以这就是我想出的（感谢Yenn）。（我的应用程序需要小 V 形）。
它使用类而不是 ID 标签，还使用级联类将其向左翻转。. . 而不是加倍我的css代码。
.chevron {
position: relative;
padding: 0px;
height:17px;
width: 6px;
margin-left:0px;
margin-top:0px;
}
.chevron:before {
content: '';
position: absolute;
top: 0;
left: 0;
height: 50%;
width: 100%;
background: gray;
-webkit-transform: skew(25deg, 0deg);
-moz-transform: skew(25deg, 0deg);
-ms-transform: skew(25deg, 0deg);
-o-transform: skew(25deg, 0deg);
transform: skew(25deg, 0deg);
}
.chevron:after {
content: '';
position: absolute;
top: 50%;
right: 0;
height: 50%;
width: 100%;
background: gray;
-webkit-transform: skew(-25deg, 0deg);
-moz-transform: skew(-25deg, 0deg);
-ms-transform: skew(-25deg, 0deg);
-o-transform: skew(-25deg, 0deg);
transform: skew(-25deg, 0deg);
}
.rotate180
{
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
于 2013-07-17T13:08:11.397 回答
0
无 CSS3，用边框做老派：
.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>于 2016-12-16T02:55:51.683 回答