css - How can I make slope -
this question has answer here:
- shape slanted side (responsive) 2 answers
how can make 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; } 
this removes need know width of main div. knowing height 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; <--- important } .slope:after { content: ""; position: absolute; <--- works above, such positioning relative 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/
Comments
Post a Comment