Drawing a triangle over a div in CSS - Twitter bootstrap

Zero
February 14, 2017
147 views
2 votes
3 Answers

I’m actually trying to implement a design done for me into HTML5 and CSS3 with Twitter Bootstrap.

I’ve got a sidebar on the left of the screen with a list inside, nothing complex.

<html>
<section class="sidebar">
    <ul class="sidebar-menu">
        <li class="active">
            <a href="/home">
                <i class="fa fa-users active-fa"></i> 
                <span class="menu-title">MY USERS</span>
            </a>
        </li> 
    </ul>
</section>
</html>

I would like to arrive to this result :

Any idea on the CSS code to manage to have that triangle on the right side centered in the middle bottom right ?

Answers

You can achieve that triangle with a pseudo element ::after, some positioning and transforming:

li {
  position: relative;
  display: block;
  background: #04a4a9;
  padding: 1em;
  overflow: hidden;
}
li a {
  color: white;
  text-decoration: none;
}
li::after {
  content: '';
  position: absolute;
  width: 15px;
  height: 15px;
  background: white;
  right: -8px;
  top: 50%;
  transform: translate(0, -50%) rotate(45deg);
}

<section class="sidebar">
  <ul class="sidebar-menu">
    <li class="active">
      <a href="/home">
        <i class="fa fa-users active-fa"></i> 
        <span class="menu-title">MY USERS</span>
      </a>
    </li>
  </ul>
</section>

You can achieve this using CSS pseudo elements:

To avoid wasting time with the triangle itself, just use a generator.

.btn {
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: center;
  background: #53BED1;
  color: #fff;
  width: 400px;
  height: 150px;
  position: relative;
}

.btn::before {
  right: 0;
  top: 40%;
  position: absolute;
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 15px 20px 15px 0;
  border-color: transparent #ffffff transparent transparent;
}

<div class="btn">My users</div>

You may indeed use a pseudo.

You can also draw background-color of li from that pseudo via a box-shadow, so the triangle is translucide.

You can use color on li to easily change bg-colors since you reset color on <a>, box-shadow color inherits color value(currentcolor) if none set in the rule (so does border-color)..

li {
  position: relative;
  display: inline-block;
  padding: 1em;
  overflow: hidden;
  color:tomato;
  text-shadow:1px 1px black;
}
li:nth-child(even) {
  color:turquoise
    }
li.active {
  color: #04a4a9;
  }
li a {
  color: white;
  text-decoration: none;
  position: relative;
  z-index: 1;
}
li::after {
  content: '';
  position: absolute;
  width:0px;
  height: 15px;
  margin: -8px;
  right: 0;
  top: 50%;
  transform: rotate(45deg);
  box-shadow: 0 0 0 400px;
}
li.active::after {
  width:15px;;
}

/*demo to check if you can  see through */
body {
  background:linear-gradient(45deg,gray,yellow,pink,blue,gray,yellow,pink,blue,gray,yellow,pink,blue,gray,yellow,pink,blue);

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<section class="sidebar">
  <ul class="sidebar-menu">
    <li>
      <a href="/home">
        <i class="fa fa-users active-fa"></i> 
        <span class="menu-title">MY USERS</span>
      </a>
    </li>
    <li class="active">
      <a href="/home">
        <i class="fa fa-users active-fa"></i> 
        <span class="menu-title">MY USERS</span>
      </a>
    </li>
    <li>
      <a href="/home">
        <i class="fa fa-users active-fa"></i> 
        <span class="menu-title">MY USERS</span>
      </a>
    </li>
    <li>
      <a href="/home">
        <i class="fa fa-users active-fa"></i> 
        <span class="menu-title">MY USERS</span>
      </a>
    </li>
    <li>
      <a href="/home">
        <i class="fa fa-users active-fa"></i> 
        <span class="menu-title">MY USERS</span>
      </a>
    </li>
  </ul>
</section>

Please signup or login to give your own answer.

Click here to cancel reply.

Drawing a triangle over a div in CSS – Twitter bootstrap

Answers