div内的三角形与文本

用户名

我有一个包含列表的边栏，但是我想要一个位于div右侧的三角形。现在，我知道了边框技巧，但是文本并未位于应有的相同位置。

JSFiddle：http : //jsfiddle.net/ppX53/44/

这是我的代码的样子：
HTML：

<li id="activeMenuLi">
  <a href="/index.php?p=admin">Admin Panel</a>
</li>'

CSS：

.multilevelpushmenu_wrapper li #activeMenuLi{
    width: 213px;
    height: 45px;
    border-top: 20px solid transparent;
    border-right: 30px solid red;
    border-bottom: 20px solid transparent;

}

现在的样子：
在此处输入图片说明

三角形不完整，但必须是:)。我想你知道我想要它的样子。我使用以下边栏：link。

注意：我不是CSS的完整新手。我只是讨厌建立侧边栏^^。我将尝试构建一个JSFiddle。

官方BAMM

海因斯

看一下代码，问题在于您正在尝试对li自身进行“边界技巧”，而不是:before/:after伪元素。如果将边界移动到伪元素，它将起作用。我在下面提供了一个示例。

body, html {
  margin: 0;
  padding: 0;
  font-family: Helvetica, Arial, sans-serif
}
h2 {
  margin: 0 0 0.5em;
  padding: 0.5em;
 }
div { 
  background-color: #40516F;
  color: #FFF;
  width: 213px;
  position: relative;
}
ul, li {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
 }
ul { width: 213px; }
li > a {
  color: #FFF;
  border-top: 1px solid #445675;
  padding: 0.6em;
  display: block;
  position: relative;
  text-decoration: none;
}
li > a:hover {
  background-color: #364155;
  color: #FFE;
}
li.is-active > a:before {
  position: absolute;
  content: "";
  top: 8px;
  right: 0;
  border-width: 10px;
  border-style: solid;
  border-color: transparent;
  border-left: none;
  border-right-color: orange;
}

<div>
<h2><i class="fa"></i>About</h2>
<ul>
  <li class="is-active"><a href="javascript:;">Our Beliefs</a>
  </li>
  <li><a href="javascript:;">Our Doctrines</a>
  </li>
  <li><a href="javascript:;">Our Constitution</a>
  </li>
  <li><a href="javascript:;">Our Leaders</a>
  </li>
  <li><a href="javascript:;">Our History</a>
  </li>
  <li><a href="javascript:;">Church Links</a>
  </li>
</ul>
  </div>