在CSS中的div上绘制一个三角形

我实际上正在尝试使用Twitter Bootstrap为我完成HTML5和CSS3的设计.

我的屏幕左侧有一个侧边栏,里面有一个列表,没什么复杂的.

    

        

            
                 
                MY USERS
            
        
 
    

我想到达这个结果:

任何关于CSS代码的想法都设法让右侧的三角形位于中间右下方的中心？

您可以使用伪元素实现该三角形::after,一些定位和转换:

li {
  position: relative;
  display: block;
  background: #04a4a9;
  padding: 1em;
  overflow: hidden;
}
li a {
  color: white;
  text-decoration: none;
}
li::after {
  content: '';
  position: absolute;
  width: 15px;
  height: 15px;
  background: white;
  right: -8px;
  top: 50%;
  transform: translate(0, -50%) rotate(45deg);
}

  

    

      
         
        MY USERS