En CSS, vous le savez peut-être, il est possible de faire des flèches en CSS uniquement en jouant avec les bordures.
Vous trouverez un lien plus bas pour générer rapidement le code CSS nécessaire pour les triangles colorés. Mais qu’en est-il si l’on souhaite avoir un triangle qui agisse comme une sorte de masque , une sorte de triangle transparent ?
Faire un triangle transparent en CSS
Voici un CodePen vous permettant de réaliser une flèche transparente en utilisant uniquement ce principe de bordure CSS :
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;
}