CODEWITHSUNDEEP
cssgeometry
user3455727
user3455727

Reputation:

Triangle inside div with text

I've got a side bar which contains a list, however I want a triangle located at the right side of the div. Now I know about the border trick, but then the text isn't located at the same location where it should be.

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

This is how my code looks like:
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;

}

How it looks like now:
enter image description here

The triangle is not complete, but it needs to be :).I think you know how I want it to look like. I Use the following sidebar: link.

Note: I am not a complete rookie with CSS. I just hate building sidebars ^^. I'll try building a JSFiddle.

OfficialBAMM

Upvotes: 1

Views: 958

Answers (1)

Hynes
Hynes

Reputation: 3424

Taking a look at your code, the problem is that you're attempting the "border-trick" on the li itself instead of a :before/:after pseudo-element. If you move the borders to a pseudo-element, it works. I've provided an example below. 

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>

Upvotes: 1

Related Questions