Looking for some help with my html/CSS code that creates a unique element at the bottom of a div with an image background.
The shape I've created is positioned at the bottom of the div...
Below is the HTML:
<div style="background-image:url('...');">
<div class="mask"></div>
</div>
And here's the CSS:
.mask:before {
border-left: 0 none;
border-right: 20px solid transparent;
left: 0;
}
.mask:after {
border-left: 20px solid transparent;
border-right: 0 none;
right: 0;
}
.mask:before, .mask:after {
border-bottom: 20px solid #fff;
content: " ";
display: block;
height: 0;
position: absolute;
top: 0;
width: 50%;
box-sizing: border-box;
}
.mask {
bottom: 0;
height: 20px;
left: 0;
position: absolute;
width: 100%;
z-index: 1000;
}
I currently have this code included in my 'mobile' jQuery. I'm trying to figure out how to make the shape rotate (the 'arrow/triangle' point to the side) on certain screen sizes. Any suggestions on how to modify the code would be appreciated.
UPDATE