在CSS中的div上绘制一个三角形
Zer*_*ero -1 html css css3 twitter-bootstrap css-shapes
我实际上正在尝试使用Twitter Bootstrap为我完成HTML5和CSS3的设计.
我的屏幕左侧有一个侧边栏,里面有一个列表,没什么复杂的.
<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>
我想到达这个结果:
任何关于CSS代码的想法都设法让右侧的三角形位于中间右下方的中心？
您可以使用伪元素实现该三角形::after,一些定位和转换:
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>