Search code examples
htmlcsstransformbackground-colorangle

Css angle background-color multiple

I am trying to get effect like on picture , but still be able to add text to it , and add active class.I tried using top border for example red, and right border transparent , but i cant get angles to match like on picture. Any idea and link would help.

enter image description here

Solution

  • You may use flex and gradient background: 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>