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，某些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>

Answer 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;
}

<div class="btn">My users</div>

Answer 3

你可能确实使用了伪。

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

您可以使用color上的li轻松更改bg颜色，因为您重置了<a>上的颜色，box-shadow颜色继承了color值（{{ 1}}）如果规则中没有设置（currentcolor也是如此）..

＆＃13;

border-color

＆＃13;

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);

＆＃13;

在CSS中的div上绘制一个三角形

3 个答案: