更改所选引导组件链接项的设计

Question

我正在使用bootstrap的链接项组件。我想稍微更改css代码以改变链接项的外观设计。

以下是默认情况下链接项目的外观。

我想改变它看起来像这样。

这将改变“活跃”的设计。链接项的类。 生成链接项的代码如下。

<div class="list-group">
  <a href="#" class="list-group-item active">Cras justo odio</a>
  <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item">Morbi leo risus</a>
  <a href="#" class="list-group-item">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item">Vestibulum at eros</a>
</div>

Answer 1

这不应该变硬。使用边框hack可以很容易地实现三角形，这里有很好的解释：https://css-tricks.com/examples/ShapesOfCSS

如果将css应用于活动list-group-item上的:after伪元素并稍微调整一下定位和大小，那么最终应该得到一些如下所示的css：

.list-group-item.active {
    position: relative;
}
.list-group-item.active:after {
    content: '';

    /* positioning */
    position: absolute;
    left: 100%;
    top: -1px;

    /* triangle */
    width: 0;
    height: 0;
    border-top: 21px solid transparent;
    border-left: 24px solid #337ab7;
    border-bottom: 21px solid transparent;
} 

简短演示：http://jsfiddle.net/njwmL64p/