如何在css斜方向右侧？

Question

我想将菜单列表项的背景看作一个标签，如何在CSS中完成并在其旁边添加图标

CSS

#cdnavheader .activeMenuItem span {
background-position: 100% -145px;
color: #2d83ab;
padding: 12px;
background-repeat: no-repeat;
color: #fff;
background-color: #2d489b;
border-top-left-radius: 5px;
border-top-right-radius: 5px;

}

Answer 1

您还可以使用伪和变换：

＆＃13;

＆＃13;

a {
  display: inline-block;/* fallback*/
  position: relative;
  overflow: hidden;
  border-radius:5px 5px 0 0;
  padding: 1em 3em 1em 2em; 
}

a:before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 120%;
  height: 200%;
  z-index: -1;
  background: tomato;
  border-radius:inherit;
  transform: skew(35deg)
}

nav {
  display: flex;
  margin: 1em;
}

＆＃13;

<nav><a href="#"> some link</a>
  <a href="#"> some link</a>
  <a href="#"> some link</a>
</nav>

＆＃13;

＆＃13;

＆＃13;

Answer 2

使用带有大边框的零高度DIV：

＆＃13;

＆＃13;

.tab {
  width: 100px; 
  height: 0px; 
  border-right: 20px solid transparent;
  border-bottom: 20px solid green;
}

＆＃13;

<div class="tab"></div>

＆＃13;

＆＃13;

＆＃13;

此处有更多信息：https://css-tricks.com/snippets/css/css-triangle/