如何使用 CSS 制作雪佛龙箭头？

Posted 2023-03-06

【中文标题】如何使用 CSS 制作雪佛龙箭头？

【英文标题】：How to Make A Chevron Arrow Using CSS?

【发布时间】：2015-02-14 00:43:02

【问题描述】：

好的，所以大家都知道你可以用这个来做一个三角形：

#triangle 
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid red;

这会产生一个实心的填充三角形。但是你会如何制作一个像这样的空心箭头状三角形呢？

【问题讨论】：

两个旋转的矩形。

jsfiddle.net/j08691/a0uogod0

使用非常大的字体？

AAAAAHHHH。 j08691 明白了。谢谢！

检查@j08691 拨弄它的权利。实现此目的的另一种方法是使用字体包，例如 Awesome Fonts fortawesome.github.io/Font-Awesome/icon/chevron-right

【参考方案1】：

您可以使用before 或after 伪元素并对其应用一些CSS。有多种方式。您可以同时添加before 和after，并旋转和定位它们中的每一个以形成其中一个条形。一个更简单的解决方案是为 before 元素添加两个边框并使用 transform: rotate 旋转它。

向下滚动查看使用实际元素而不是伪元素的不同解决方案

在这种情况下，我将箭头作为项目符号添加到列表中，并使用 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>

当然，您不需要使用before 或after，您也可以将相同的技巧应用于普通元素。对于上面的列表，它很方便，因为您不需要额外的标记。但有时您可能仍然想要（或需要）标记。您可以为此使用div 或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.

如果您寻求更多灵感，请务必查看这个很棒的纯 CSS icons by Nicolas Gallagher 库。 :)

【讨论】：

这工作得很好，但有几件事需要修改。 1.我如何将箭头稍微向下移动而不将其余文本向下移动？我尝试了#arrow::after，然后设置了一个margin-top，但这将所有内容都向下移动，包括文本。 2. 我需要它在鼠标悬停时改变颜色。现在，只有文本改变颜色。如何同时更改文本和箭头？

要更改箭头的颜色，您需要更改border-color，因为箭头实际上不是字符而是边框。对于定位，您可以将position: relative 添加到箭头并使用top 和left 移动它。我已经在修改后的第一个 sn-p 和第二个 sn-p 中显示了定位。请注意 li:hover::before 的完美组合，它指的是悬停列表项的 before 伪元素。

实际上，还有一件事：所以我现在尝试将这个文本居中（使用 after 元素）。问题是这个后元素显然占用了很多不可见的空间，因此文本似乎非常偏离中心。我如何将那个不可见的空间设置为 0？我尝试了left：0和right：0，以及margin-left：0和margin-right：0，都没有成功。

我不太确定你的意思，但是伪元素本身已经有 0 的边距，所以你需要一个负边距来抵消任何空白。例如，在第二个 sn-p 中，您可以添加 margin-left: -0.4em; 以将箭头放在前一个单词旁边，不留任何空格。

我在***.com/questions/27549099/…发布了一个新问题

【参考方案2】：

这比其他建议更容易解决。

只需绘制一个正方形并将border 属性应用于两个连接边。

然后根据你希望箭头指向的方向旋转正方形，例如：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>

【讨论】：

这是一个完美的答案，它确实需要被接受。非常简单，而且每一点都一样有效。

@AndrewFaulkner 很高兴它有帮助。

【参考方案3】：

响应式雪佛龙/箭头

它们会根据您的文本自动调整大小，并且着色颜色相同。 即插即用:)jsBin demo playground

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);
.arr-left  transform:rotate(135deg);
.arr-up    transform:rotate(-135deg);
.arr-down  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

【讨论】：

哇，那个符号居然叫"Top right corner"！好的。 :) 对宽度的控制比使用边框要少，但仍然 +1 以显示字体的可能性。对于其他符号，这可能比 CSS 形状技巧更好。

请注意，如果用户没有字体，字体图标将无法正常工作，因此您必须确保对大多数系统可用的字体进行适当的后备。你也可以选择通过 CSS 下载字体，但是为几个图标这样做是浪费带宽。但是，如果您有很多图标，或者您希望它们具有自己的风格，您可能会选择将所有图标添加到您自己的图标字体中并通过 CSS 加载。这样，您（几乎）可以确定拥有正确的字体，而无需为少数符号下载巨大的字体。

在 html 4.0 中采用了总共包含 38887 个字符的集合。因为v. 6.2.0 September 2012 1 Unicode UTF-8 字符集上升到 110182，现在有了 HTML5 和默认 UTF-8，看起来我们的字符看起来不错：unicode.org/Public/UNIDATA/UnicodeData.txt

角色存在不代表可以显示。您需要正确的字体来显示它。这就是您答案的第一个版本中的字符失败的原因：因为我的浏览器的默认字体不包含这些字符。因此，要使用这样的字符，您需要指定要使用的字体，并且如果其他字体并非在所有平台上都可用，您必须提供适当的备用字体。例如，\231d 字符可能在此处可用，但在 Mac 或 android 设备上不可用。 HTML版本和响应编码与它无关。

你能把它做得更薄吗？而不是这么胖？更改字体粗细没有任何作用。

【参考方案4】：

这是一种不同的方法：

1) 使用乘号：××

2) 用overflow:hidden 隐藏一半

3) 然后添加一个三角形作为提示的伪元素。

这里的优点是不需要转换。 （在 IE8+ 下可以使用）

FIDDLE

.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>

【讨论】：

适用于 Internet Explorer、chrome 和 firefox。

【参考方案5】：

只需使用before 和after Pseudo-elements - CSS

*box-sizing: border-box; padding: 0; margin: 0
:rootbackground: white; transition: background .3s ease-in-out
:root:hoverbackground: 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/>

【参考方案6】：

另一种使用 borders 且没有 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>

【参考方案7】：

>本身就是很奇妙的箭头！只需在前面加上一个 div 并设置它的样式。

div
  font-size:50px;

div::before
  content:">";
  font: 50px 'Consolas';
  font-weight:900;

<div class="arrowed">Hatz!</div>

【讨论】：

这是一个“大于”符号，而不是箭头。

@MarkKnol 这和其他人的箭头看起来有什么不同？这对我来说似乎是最好的解决方案。

【参考方案8】：

使用 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>

【参考方案9】：

我需要在我的项目中将input 更改为箭头。以下是最终作品。

#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">

这里Fiddle

【讨论】：

很棒的代码！它只使用一个难以做到的元素:)

【参考方案10】：

.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: "\00a0"; /* 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);

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

类似于 Roko C，但对大小和位置的控制更多。