在css中绘制箭头答案

【问题标题】：Drawing an arrow in css在css中绘制箭头
【发布时间】：2019-10-17 13:12:42
【问题描述】：

我需要画一个箭头，最好使用伪（:after 或 :before）元素。它应该看起来像这样：但它看起来像这样：

这是我的代码：

HTML：

<div class="info">
<a href="http://www.bay42.io" class="arrow1"><p>Learn about our technology<span class="arrow-right"></p></span></a></div>

CSS：

.arrow-right:after{
        content: "";
        display:inline-block!important;
            width:0;
            height:0;
            border-left:14px solid #C8A962;
            border-top:14px solid transparent;
            border-bottom: 14px solid transparent;

        }

【问题讨论】：

How can I make a pointy arrow with a div in CSS的可能重复
您可以使用 characyere → 。请参阅：dev.w3.org/html5/html-author/charref 你会找到你需要的角色实体。对于伪，使用 content:"\2192"; + 字体大小来缩放它
CSS 不是绘图工具。您应该为此使用图像，或者更好的是，学习如何使用 SVG（一种合适的绘图工具）来完成这些简单的事情。
你不能只使用一个更有用、更容易使用的 SVG 吗？

标签： css pseudo-element

【解决方案1】：

当然，它看起来像这样，因为您只为箭头的triangle 部分使用了代码。

您还需要添加其他部分。您可以使用另一个伪元素 before 来做到这一点。

你可以改变和调整'宽度''高度''颜色'等等。

.arrow-right:after {
  content: "";
  display: inline-block !important;
  width: 0;
  height: 0;
  border-left: 8px solid #C8A962;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  vertical-align: middle;

}

.arrow-right:before {
  width: 20px;
  height: 2px;
  background: #C8A962;
  content: "";
  display: inline-block;
  vertical-align: middle;
}

<div class="info"><a href="http://www.bay42.io" class="arrow1">
    Learn about our technology<span class="arrow-right"></span>
  </a></div>

【讨论】：

【解决方案2】：

您可以尝试为此使用箭头 html 代码→

<div class="info">
<a href="http://www.bay42.io" class="arrow1"><p>Learn about our technology</a><span>&#8594;</span><p></p></div>

【讨论】：

【解决方案3】：

看来我的评论丢失了

您可以使用字符 → 。请参阅：https://dev.w3.org/html5/html-author/charref 你会找到你需要的角色实体。对于伪，使用content:"\2192"； + font-size 缩放它

.arrow1::after {
  content: '\2192';
  /* little make up */
  font-size: 2em;
  /* whatever needed*/
  padding: 0 0.5em;
  /* whatever needed*/
  vertical-align: -0.1em;
  /* whatever needed*/
}

a {
  text-decoration: none;
  float:left;
  clear:both
}

.arrow1:nth-child(2)::after {
  content: '\21fe';
  display:inline-block;
  transform:scale(2,1);
}

.arrow1:nth-child(3)::after {
  content: '\21d2';
  display:inline-block;
  transform:scale(2,0.8);
}

<a href=" " class="arrow1">Learn about our technology</a>

<a href=" " class="arrow1">Another one stretched</a>

<a href=" " class="arrow1">or that one can be used and stretched too</a>

【讨论】：

【解决方案4】：

p {
 position: relative;
 width: max-content;
}

.arrow-right:after {
 top: 50%;
 right: -50px;
 position: absolute;
 content: "";
 display: inline-block !important;
 width: 0;
 height: 0;
 border-left: 14px solid black;
 border-top: 14px solid transparent;
 border-bottom: 14px solid transparent;
 transform: translateY(-50%) scale(0.4);
}

.arrow-right:before {
 content: "";
 width: 25px;
 height: 1px;
 background: black;
 position: absolute;
 top: 50%;
 right: -40px;
 transform: translateY(-50%);
}

试试这个。将颜色更改为白色。

【讨论】：