在CSS中使用div绘制三角形

-1

我实际上正在尝试将使用Twitter Bootstrap实现的设计实现到HTML5和CSS3中。在CSS中使用div绘制三角形

我在屏幕左边有一个边栏，里面有一个列表，没什么复杂的。

<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代码的任何想法设法对右侧中间右下角为中心的那个三角形？

来源

2017-02-14 Zero

为什么使用列出的项目？为什么不divs？ – Nofel

你有任何的CSS？ – andreas

'：之后'节会做。 – Roberrrt

可以实现与伪元素::after，一些positioning和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>

来源

2017-02-14 15:14:01 andreas

这留下了按钮的白色立方体outsite的一半。你忘了溢出。 – snkv

你打了我。不错的解决方法！ – Nofel

@Sqnkov你是对的，更新我的答案！ – andreas

你可以做到这一点CSS pseudo elements：

要AV OID浪费时间与三角形本身，只使用一个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>

来源

2017-02-14 15:14:15 snkv

您确实使用伪。

您还可以通过box-shadow从该伪指令中绘制 li，所以三角形是透明的。

您可以使用color上li轻易改变BG-颜色，因为你<a>复原颜色，box-shadow颜色继承color值（currentcolor）如果没有在规则（也是如此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>

来源

2017-02-14 15:48:57

在CSS中使用div绘制三角形

回答

相关问题