在右边框上绘制三角形[重复]答案

【问题标题】：Draw triangle on right-border [duplicate]在右边框上绘制三角形[重复]
【发布时间】：2015-03-06 23:07:16
【问题描述】：

我有一个包含很多 li 的 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>

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

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

【问题讨论】：

你可以给我们一张图片，让我成为李的背景！并将其放置在您想要的位置
同时使用:after 和 :before: jsfiddle.net/zen5vvzw/1

标签： css html css-shapes

【解决方案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>

【讨论】：

@No1Lives4Ever 你应该考虑接受这个作为正确答案。更好
更好，如果轮廓草图确实是他想要的......但这是一个很好的解决方案，我也赞成。

【解决方案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>

基于this tutorial。

【讨论】：

【解决方案3】：

像这样：

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>

【讨论】：