Reputation: 1045

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.

Upvotes: 2

Answers (5)

Jordi Nebot

Reputation: 3401

Here's my version using clip-path (JSFiddle)

.red {color: #e10215; }
.orange {color: #fca326; }
.yellow {color: #fdda2e; }
.blue {color: #22a6c2; }
.green {color: #1fbf73; }

.menu {
  list-style: none;
  max-width: 200px;
  border: 1px solid #081829;
  outline: 8px solid #254361;
  padding: 0;
}

.menu-item {
  position: relative;
  text-transform: uppercase;
  font-family: sans-serif;
  font-weight: 300;
  background-color: #183553;
  padding: 1em 2em;
  box-sizing: border-box;
}

.menu-item span {
  display: block;
}

.menu-item .deco {
  width: 20%;
  position: absolute;
  height: 100%;
  top: 0;
  left: 0;
}

.menu-item .label {
  width: 100%;
  padding-left: 20%;
  color: white;
}

.menu-item:hover {
  outline: 1px solid;
  outline-offset: -1px;
}

.red .deco {
  background-color: #e10215; 
  -webkit-clip-path: polygon(0 0, 90% 0, 80% 100%, 0% 100%);
  clip-path: polygon(0 0, 90% 0, 80% 100%, 0% 100%);
}
.orange .deco {
  background-color: #fca326;
  -webkit-clip-path: polygon(0 0, 80% 0, 70% 100%, 0% 100%);
  clip-path: polygon(0 0, 80% 0, 70% 100%, 0% 100%);
}
.yellow .deco {
  background-color: #fdda2e;
  -webkit-clip-path: polygon(0 0, 70% 0, 60% 100%, 0% 100%);
  clip-path: polygon(0 0, 70% 0, 60% 100%, 0% 100%);
}
.blue .deco {
  background-color: #22a6c2;
  -webkit-clip-path: polygon(0 0, 60% 0, 50% 100%, 0% 100%);
  clip-path: polygon(0 0, 60% 0, 50% 100%, 0% 100%);
}
.green .deco {
  background-color: #1fbf73;
  -webkit-clip-path: polygon(0 0, 50% 0, 40% 100%, 0% 100%);
  clip-path: polygon(0 0, 50% 0, 40% 100%, 0% 100%);
}

<ul class="menu">
  <li class="red menu-item">
    <span class="deco"></span>
    <span class="label">Certain</span>
  </li>
  <li class="orange menu-item">
    <span class="deco"></span>
    <span class="label">Expected</span>
  </li>
  <li class="yellow menu-item">
    <span class="deco"></span>
    <span class="label">Probable</span>
  </li>
  <li class="blue menu-item">
    <span class="deco"></span>
    <span class="label">Possible</span>
  </li>
  <li class="green menu-item">
    <span class="deco"></span>
    <span class="label">Not expected</span>
  </li>
</ul>

Upvotes: 1

noitse

Reputation: 1045

Ok after fiddling around with :after i have managed to make it look ok, still have to play a little with numbers to make it responsive and perfect

https://jsfiddle.net/noitse/peyvxto4/

HTML :

<div class="levels">
          <div class="certain">CERTAIN</div>
          <div class="expected">EXPECTED</div>
          <div class="probable">EXPECTED</div>
          <div class="possible">EXPECTED</div>
          <div class="notexpected">NOT EXPECTED</div> 
</div>

CSS :

levels{
    width:12em;
    border:2px solid #06182a;
    height:16em;
    margin-left:7%;
    border-radius:4px;
    background-color:#153454;
    padding:5px;

  }


  .levels div{ 
    color:white;
    height:20%;
    text-align:center;
    vertical-align: center;
    position:relative; 

  }

  .levels div.certain:after{
    content:'';
    height:100%;
    width:20%;
    border-top: 3.2em solid red;
    position:absolute;
    border-right:7px solid transparent;
    left:0px;
  }

   .levels div.expected:after{
    content:'';
    height:100%;
    width:16%;
    border-top: 3.2em solid orange;
    position:absolute;
    border-right:7px solid transparent;
    left:0px;
  }

  .levels div.probable:after{
    content:'';
    height:100%;
    width:12.5%;
    border-top: 3.2em solid yellow;
    position:absolute;
    border-right:7px solid transparent;
    left:0px;
  }


  .levels div.possible:after{
    content:'';
    height:100%;
    width:10%;
    border-top: 3.2em solid blue;
    position:absolute;
    border-right:7px solid transparent;
    left:0px;
  }


  .levels div.notexpected:after{
    content:'';
    height:100%;
    width:6%;
    border-top: 3.2em solid green;
    position:absolute;
    border-right:7px solid transparent;
    left:0px;
  }

Upvotes: 0

G-Cyrillus

Reputation: 105893

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>

Upvotes: 2

Chibiao.Wang

Reputation: 394

.example {
  width:200px;
  height:40px;
  color: white;
  line-height:40px;
  text-align: center;
}
.example:nth-child(1) {
  background: linear-gradient(105deg, red 20px, #000 20px);
}
.example:nth-child(2) {
  background: linear-gradient(105deg, yellow 10px, #000 10px);
}

<div class="example">text</div>
<div class="example">text</div>

another solution here