div 内带有文字的三角形

Question

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

我的代码是这样的：
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

Answer 1

看看你的代码，问题是你在 li 本身而不是 :before/:after 上尝试 "border-trick" 伪-元素。如果将边框移动到伪元素，它就可以工作。我在下面提供了一个例子。

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>

div 内带有文字的三角形

Triangle inside div with text

css

geometry