html - Css angle background-color multiple

Question

我试图获得像图片一样的效果，但仍然能够向其添加文本，并添加事件类。我尝试使用顶部边框(例如红色)和右边框透明，但我无法获得匹配的 Angular 图片上。任何想法和链接都会有所帮助。

Answer 1

您可以使用 flex 和渐变背景:http://codepen.io/gc-nomade/pen/XNgamB

* {
  margin:0;
  padding:0;
}
ul {
  display:inline-flex;
  flex-flow:column;
  vertical-align:top;
  width:13em;
  height:17em;
  background:#153454;
  box-shadow:inset  0 0 2px  ;
  border:8px solid #224262;
  background:linear-gradient(97deg, transparent 3em , #153454 1em ),
    linear-gradient(to top, #00B169 20%, #00A6C4 20% , #00A6C4 40%, #FFDE00 40%, #FFDE00 60%, #FF9900 60%, #FF9900 80%, #E40000 80%)
}
li  {
  flex:1;
  text-align:center;
  display:flex;
  align-items:center;
  justify-content:center;
  font-variant:small-caps;
  color:#ddd;
  font-size:1.5em;
}
.act, li:hover  {
  box-shadow:inset 0 0 0 2px #FF9600
}

<ul>
  <li>item</li>
  <li>item</li>
  <li class="act">item</li>
  <li>item</li>
  <li>item</li>
</ul>