How can I make slope

Question

How I can make Slope like this will 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;
}

enter image description here

Pasting your question into Google yields http://tympanus.net/codrops/2011/12/21/slopy-elements-with-css3/ as the first result. — Mr Lister, Jun 26 '15 at 17:28

score 3 · Accepted Answer · answered Jun 26 '15 at 17:39

This removes the need to know the width of the main DIV. Knowing the height is still necessary though...

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

score 2 · Answer 2 · answered Jun 26 '15 at 17:32

This only works based on the fact that you know the width and height of .slope. Nonetheless, here is my solution:

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>

Michael Eugene Yuen · Answer 3 · 2015-06-26T17:38:25.693

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

Can you combine two divs like this?

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

How can I make slope

3 Answers3