Треугольник внутри div с текстом

У меня есть боковая панель, содержащая список, однако мне нужен треугольник, расположенный в правой части 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; 

}

Как это выглядит сейчас:
enter image description here

Треугольник не является полным, но это должно быть :) Я думаю, вы знаете, как я хочу, чтобы он выглядел. I Используйте следующую навигационную панель: link.

Примечание: я не полный новобранец с CSS. Я просто ненавижу строить боковые панели ^^. Я постараюсь создать JSFiddle.

OfficialBAMM

источник

2015-03-06 OfficialBAMM

Пожалуйста, включите полный код, чтобы воспроизвести проблему (см [MCVE] (http://stackoverflow.com/help/mcve)) –

@ веб-Тики Я не уверен, что вы хотите видеть. Так как боковая панель динамически нарастает. – OfficialBAMM

Чтобы ответить на ваш вопрос, вам нужно показать HTML/CSS, который создает треугольник и воспроизводит проблему, которую вы показываете на своем изображении. –

Взглянув на свой код, проблема заключается в том, что вы пытаетесь «границе-трик» на самом 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>

источник

2015-03-06 14:12:58 Hynes

Треугольник внутри div с текстом

ответ

Смежные вопросы