Question

我需要画一个箭头，最好使用伪（：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;

        }

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

Answer 2

为此，您可以尝试使用箭头HTML代码＆＃8594

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

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

Answer 4

// Modify the Chart's AutoCursor
chart.setAutoCursor( cursor => cursor
    // Modify the ResultTable (i.e. cursor box)
    .setResultTable( rt => rt
        // Style the text inside the box
        .setTextFillStyle( fillStyle => fillStyle.setColor(ColorHEX('#996699') )
)

// Alternatively you can have the text inside the cursor box change color
// automatically depending on the hovered Series:

chart.setAutoCursor(cursor => cursor
    // Color the cursor box's text automatically based on hovered Series style.
    .setResultTableAutoTextStyle(true)
)

尝试一下。将颜色更改为白色。

在CSS中绘制箭头

4 个答案: