Question

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

Answer 1

您可以使用弹性和渐变背景：http://codepen.io/gc-nomade/pen/XNgamB

＆＃13;

* {
  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
}

＆＃13;

<ul>
  <li>item</li>
  <li>item</li>
  <li class="act">item</li>
  <li>item</li>
  <li>item</li>
</ul>

＆＃13;

Answer 2

＆＃13;

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

＆＃13;

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

＆＃13;

这里的另一个解决方案

Answer 3

这是我使用clip-path（JSFiddle）

的版本

＆＃13;

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

＆＃13;

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

＆＃13;

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

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

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

Css角度背景颜色倍数

5 个答案: