在 CSS 中的 div 上画一个三角形

Question

实际上，我正在尝试通过 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 代码的任何想法都可以设法使右侧的三角形位于右下角的中央？

Answer 1

你可以用伪元素实现那个三角形 ::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>

Answer 2

您可以使用 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>

Answer 3

你可能确实使用了伪造的。

您还可以通过 box-shadow 从那个伪画出 background-color of li，所以三角形是半透明的。

您可以在 li 上使用 color 轻松更改 bg-colors，因为您在 <a> 上重置了颜色，box-shadow 颜色继承了 color value(currentcolor) 如果在规则中设置了 none（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>

在 CSS 中的 div 上画一个三角形

Drawing a triangle over a div in CSS

html

css

twitter-bootstrap

css-shapes