div内的三角形与文本

Question

我有一个包含列表的侧栏，但是我想要一个位于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。

OfficialBAMM

Answer 1

看一下你的代码，问题是你在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>