在 right-border 上绘制三角形

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>

请注意，一里可以多一行，所以行的高度是可以改变的。固定高度（一行）的箭头就够了。

这可能吗？如果是，如何？

Answer 1

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

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

基于this tutorial.

Answer 2

像这样：

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

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

Answer 3

您可以使用transform and 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>

在 right-border 上绘制三角形

Draw triangle on right-border

html

css

css-shapes