我该怎么做坡

Question

我怎么能像这样制作Slope 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

这使得无需知道主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;
}

小提琴： https://jsfiddle.net/vh1mk5yx/5/

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

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