Я пытаюсь получить эффект, как на картинке, но все же могу добавить текст к нему и добавить активный класс. Я попытался использовать верхнюю границу, например, красную, а правую - прозрачную, но я не могут получить углы, чтобы соответствовать, как на картинке. Любая идея и ссылка помогут.Css angle background-color multiple
Вы можете использовать гибкий и градиент backg раунд: 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>Я сделал это с после, но это выглядит правильно для меня. благодаря – noitse
.example {
width:200px;
height:40px;
color: white;
line-height:40px;
text-align: center;
background-color: #333;
}
.example::before {
content: '';
display:block;
float: left;
width: 10px;
border-right: 10px solid transparent;
border-top: 40px solid red;
}
<div class="example">text<div>.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>другое решение здесь
но используя линейный градиент сделает его зазубренным –
Ok после того, как возиться с: после того, как я сумел сделать это выглядеть нормально, все равно придется немного поиграть с цифрами, чтобы сделать его отзывчивым и совершенный
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;
}
Вот моя версия, использующая 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>
Я попытался это http://stackoverflow.com/questions/12699210/background- квадрат с одной стороной на угол Но не могу получить углы, чтобы соответствовать, в настоящее время пытается с/до – noitse