我怎样才能做坡度

Question

我怎样才能使坡度像这样 CSS3？ FIDDLE

HTML

<div class="slope">
    Hello
</div>

CSS

.slope{
    width:500px;
    height:100px;
    background:#0093f7;
    text-align:center;
    font-size:26px;
    color:#fff;
    vertical-align:middle;
}

Answer 1

.slope{
    width:500px;
    height:100px;
    background:#0093f7;
    text-align:center;
    font-size:26px;
    color:#fff;
    vertical-align:middle;
    float: left;
    line-height: 100px;
}

.triangle {
    float: left;
    border-style: solid;
    border-width: 100px 100px 0 0;
    border-color: #0093f7 transparent transparent transparent;
}


<div class="slope">
    Hello
</div>
<div class="triangle"></div>

你能这样组合两个div吗？

https://jsfiddle.net/vh1mk5yx/3/

Answer 2

这仅在您知道 .slope 的宽度和高度的情况下才有效。尽管如此，这是我的解决方案：

body{margin:0;}
.slope{
  width:500px;
  height:100px;
  background:#0093f7;
  text-align:center;
  font-size:26px;
  color:#fff;
  vertical-align:middle;
}
.slope::after{
  content: " ";
  display: block;
  border-right: 50px solid transparent;
  border-bottom: 50px solid transparent; 
  border-left: 50px solid #0093f7;
  border-top: 50px solid #0093f7;
  position:absolute;
  left:500px;
  top:0;
}

<div class="slope">
    Hello
</div>

Answer 3

这样就不需要知道主要的宽度 DIV。知道身高还是有必要的...

 .slope{
  width:500px;
  height:100px;
  background:#0093f7;
  text-align:center;
  font-size:26px;
  color:#fff;
  vertical-align:middle;
  overflow: visible;
  position: relative;     <--- this is important
}

.slope:after {
  content: "";
  position: absolute;     <--- works with the above, such that positioning is relative to the main DIV
  display: block;
  right: -100px;
  top: 0px;
  width: 0px;
  height: 0px;
  border-top: solid 100px #0093f7;
  border-right: solid 100px transparent;
}

Fiddle: https://jsfiddle.net/vh1mk5yx/5/

我怎样才能做坡度

How can I make slope

css

css-shapes