在右边框上绘制三角形

Question

我有一个带有很多li的ul元素。某些线条（li）以黄色背景突出显示。

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

这样的事情：

Fiddle

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

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

请注意一个li可以包含更多的一行，因此可以更改行的高度。固定高度（一条线）的箭头足够好。

这可能吗？如果是，怎么样？

Answer 1

您可以使用transform和Pseudo-elements

＆＃13;

＆＃13;

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
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

这应该这样做（但我怀疑你可以在没有图像的情况下得到轮廓箭头 - 只有完整）。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

基于this tutorial。

Answer 3

像这样：

＆＃13;

＆＃13;

li{ 
    position: relative;
}

.highlighted:after, .highlighted:before { 
    right: 0px;
    top: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none; 

} 

.highlighted:after {
    border-color: rgba(255, 255, 255, 0);
    border-right-color: #fff;
    border-width: 6px;
    margin-top: -6px;
} 
.highlighted:before { 
    border-color: rgba(245, 23, 7, 0);
    border-right-color: #f51707;
    border-width: 9px;
    margin-top: -9px;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;