在右边框上绘制三角形

Question

我有一个很多李的ul元素.某些线条(li)以黄色背景突出显示.

我想在右边框添加一个三角形.此三角形应该看起来像指向文本的箭头.

像这样的东西:

小提琴

我试图用右边框绘制这个三角形,但这并没有给我正确的形状.

<ul>
    <li>not highlighted</li>
    <li>not highlighted</li>
    <li class="highlighted">HIGHLIGHTED</li>
    <li>not highlighted</li>
</ul>
<style>
.highlighted {
    border-right: 20px solid red;
}
</style>

Please give a notice on the that one li can contain more the one line, so the height of the line can be changed. Arrow with fixed height (of one line) is good enough.

Is this possible? If yes, how?

Answer 1

您可以使用transform和Pseudo-elements

li{
  height: 20px;
  line-height: 20px;
  position: relative;
  margin-bottom: 10px
}
li.highlighted:before, li.highlighted:after{
  content: '';
  position: absolute
}
li.highlighted:before{
  width: 12px;
  height: 12px;
  right: 10px;
  transform: rotate(45deg);
  border-left: 2px solid red;
  border-bottom: 2px solid red
}
li.highlighted:after{
  height: 20px;
  width: 2px;
  right: 15px;
  background: red;
  top: -3px
}

<ul>
    <li>not highlighted</li>
    <li>not highlighted</li>
    <li class="highlighted">HIGHLIGHTED</li>
    <li>not highlighted</li>
</ul>

Answer 2

这应该做到(但我怀疑你可以得到没有图像的轮廓箭头 - 只有完整).

.highlighted:after {
  content: "";
  position: absolute;
  right: 0;
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-right: 10px solid red;
}

<ul>
  <li>not highlighted</li>
  <li>not highlighted</li>
  <li class="highlighted">HIGHLIGHTED</li>
  <li>not highlighted</li>
</ul>

基于本教程.