I'm trying to create an effect where I have a transparent arrow above any image in CSS3. See the following image.
Any ideas how to do this effect? Using LESS if that comes to any help.
See Question&Answers more detail:osI'm trying to create an effect where I have a transparent arrow above any image in CSS3. See the following image.
Any ideas how to do this effect? Using LESS if that comes to any help.
See Question&Answers more detail:osyou could use the CSS3 triangle technic, and make the inverted shape by combining the :before
and :after
pseudo objects, each to draw one part of the triangle.
You could do something like this:
.image {
position:relative;
height:200px;
width:340px;
background:orange;
}
.image:before, .image:after {
content:'';
position:absolute;
width:0;
border-left:20px solid white;
left:0;
}
.image:before {
top:0;
height:20px;
border-bottom:16px solid transparent;
}
.image:after {
top:36px;
bottom:0;
border-top:16px solid transparent;
}
here is an illustrative jsfiddle
I just used a plane orange background for the example ... but you can change it to image, and you hopefully get what you wanted =)
Edit: and a more final result could then be something like this