css - How can I make slope -


this question has answer here:

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

enter image description here

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

Popular posts from this blog

OpenCV OpenCL: Convert Mat to Bitmap in JNI Layer for Android -

android - org.xmlpull.v1.XmlPullParserException: expected: START_TAG {http://schemas.xmlsoap.org/soap/envelope/}Envelope -

python - How to remove the Xframe Options header in django? -