Css clip path alternative

/* 
one way of doing it by changing the border(left,right,top) width and color
in the ::after pseudo-element
demo:https://codepen.io/abdelghanymh/pen/mdqyaoR?editors=1100
*/

.indexBanner:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  
  /*this is where the magic happens*/
  border-left: 50vw solid white;
  border-right: 50vw solid white;
  border-top: 15vw solid transparent;
}
.indexBanner {
  background-image: url('http://nauci.se/Flipo/assets/images/study.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
  background-color: #404040;
  height: 500px;
  position: relative;
  overflow-x: hidden;
}
<div class="indexBanner"> 
</div> 

@https://stackoverflow.com/users/6263942/gleb-kemarsky

Source: stackoverflow.com

Similar codes

0 vote275 views1 answer
Using a Python dict for a SQL INSERT statement
CSS
9 votes302 views3 answers
Bootstrap badge color
CSS Bootstrap
1 vote297 views1 answer
Animated website
CSS
1 vote266 views1 answer
Convert image in rounshape in css
CSS
0 vote528 views1 answer
Twig inline css
CSS
0 vote254 views2 answers
Css make bottom of the div triangle
CSS
0 vote279 views2 answers
How to add an image to a label in css
CSS
6 votes264 views1 answer
Hidden vs visible
CSS
38 votes288 views6 answers
Rotate image css
CSS
17 votes298 views2 answers
Solved - gulp : File C:\Users\Tech\AppData\Roaming\npm\gulp.ps1 cannot be loaded because running scripts is disabled on this system.
CSS