In CSS, as you may know, it’s possible to create arrows just by playing with borders.
Below, you’ll find a link for quickly generating the necessary CSS code for colored triangles. But what if you want a triangle that acts like a kind of mask, a sort of transparent triangle ?
Creating a transparent triangle in CSS
Here is a way to achieve a transparent arrow using only this CSS border principle :
main{
margin: 0 auto;
max-width:800px;
}
.arrow_bot{
background: url("http://netdna.webdesignerdepot.com/uploads/2013/12/featured5.jpg") #FF795C no-repeat ;
background-size:cover;
width: 100%;
height: 500px;
position: relative;
}
.arrow_bot::before {
position: absolute;
content:"";
border-style: solid;
border-width: 0 50px 50px;
border-color: #ffffff transparent #ffffff #ffffff;
left:0;
right: 50%;
bottom: 0;
}
.arrow_bot::after {
left: 50%;
position: absolute;
content:"";
width: 50%;
border-style: solid;
border-width: 0 0 50px 50px;
border-color: transparent transparent #ffffff transparent;
bottom: 0;
}