css角度背景色多重答案

【问题标题】：Css angle background-color multiplecss角度背景色多重
【发布时间】：2016-11-24 15:35:46
【问题描述】：

我正在尝试获得像图片一样的效果，但仍然可以向其添加文本，并添加活动类。我尝试使用顶部边框，例如红色，右边框透明，但我无法获得匹配的角度图片上。任何想法和链接都会有所帮助。

【问题讨论】：

我已经尝试过这个stackoverflow.com/questions/12699210/… 但无法获得匹配的角度，目前正在尝试之前/之后

标签： html css transform background-color angle

【解决方案1】：

您可以使用弹性和渐变背景：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>

【讨论】：

我用 after 成功了，但这对我来说看起来很合适。谢谢

【解决方案2】：

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

这里有另一个解决方案

【讨论】：

但使用线性渐变会使其呈锯齿状

【解决方案3】：

这是我使用 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>

【讨论】：

【解决方案4】：

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

&lt;div class="example"&gt;text&lt;div&gt;

【讨论】：

【解决方案5】：

在摆弄之后好吧：在我设法让它看起来不错之后，仍然需要玩一点数字以使其响应和完美

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

【讨论】：