在CSS中的div上绘制一个三角形[重复]答案

【问题标题】：Drawing a triangle over a div in CSS [duplicate]在CSS中的div上绘制一个三角形[重复]
【发布时间】：2017-02-14 23:55:23
【问题描述】：

我实际上是在尝试使用 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 代码的想法是如何让右侧的三角形位于右下角的中间？

【问题讨论】：

你为什么使用列出的项目？为什么不用 div？
你有css吗？
:after 就可以了。
SVG 也可以解决问题

标签： html twitter-bootstrap css css-shapes

【解决方案1】：

您可以使用伪元素::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>

【讨论】：

这会在按钮之外留下一半的白色立方体。你忘记了溢出。
你打败了我。很好的解决方法！。
@Sqnkov 你是对的，更新了我的答案！

【解决方案2】：

您可以使用 CSS pseudo elements 实现此目的：

为避免在三角形本身上浪费时间，只需使用 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;
}

&lt;div class="btn"&gt;My users&lt;/div&gt;

【讨论】：

【解决方案3】：

你可能确实使用了伪。

您还可以通过box-shadow 从该伪中绘制background-color 或li，因此三角形是半透明的。

您可以在li 上使用color 轻松更改背景颜色，因为您在<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>

【讨论】：