Css角度的背景顏色倍數

Question

我想獲得像圖片上的效果，但仍然能夠添加文本到它，並添加活動class.I嘗試使用頂部邊框例如紅色和右邊框透明，但我不能得到像圖片上的角度匹配。 任何想法和鏈接都會有所幫助。

Answer 1

您可以使用Flex和梯度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>

Answer 2

.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>

Answer 3

.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>

這裏的另一個解決方案

Answer 4

好與周圍擺弄後：我已成功後，使其看起來好，還是要發揮一點與數字使其更加完善的

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; 
    } 

Answer 5

這是一個使用我的版本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>