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 ?
3
Answers
You can achieve that triangle with a pseudo element
::after
, some positioning and transforming:You can achieve this using CSS pseudo elements:
You may indeed use a pseudo.
You can also draw
background-color
ofli
from that pseudo via abox-shadow
, so the triangle is translucide.You can use
color
onli
to easily change bg-colors since you reset color on<a>
,box-shadow
color inheritscolor
value(currentcolor
) if none set in the rule (so doesborder-color
)..