Zigzag Border like Google+
Published in
1 min readNov 2, 2015
Nice bit of CSS today. Adding Google+ style zigzag borders to images.
Firstly, add the .jagged-border class to a div surrounding your image:
<div class=”jagged-border”>
<img src=”yourimageurl” />
</div>
Now add this to your .css file, this is for a horizontal jagged border at the bottom of the image:
.jagged-border {
position: relative;
}.jagged-border:after {
background-position: left-bottom;
background-repeat: repeat-x;
background-size: 10px 10px;
content: “ “;
display: block;
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
height: 10px;
}.jagged-border:after{
background-image: linear-gradient(-45deg, #ffffff 5px, transparent 0), linear-gradient(45deg, #ffffff 5px, transparent 0);
}
Alternatively, you can add a vertical jagged border to the right of the image:
.jagged-border {
position: relative;
}.jagged-border:after {
background-position: right-top;
background-repeat: repeat-y;
background-size: 10px 10px;
content: “ “;
display: block;
position: absolute;
right: 0px;
top: 0px;
width: 10px;
height: 100%;
}.jagged-border:after{
background-image: linear-gradient(-45deg, #ffffff 5px, transparent 0), linear-gradient(-135deg, #ffffff 5px, transparent 0);
}
You can of course edit the colours uses, or even the position of the border.