On my clients website, I decided to use a zigzag css border instead of an image for speed purposes. I wanted to have different colors and variations, but I encountered a problem. While my version displayed correctly on Chrome and Firefox using Windows, it failed to render properly on Internet Explorer 11. Despite my attempts to fix it by adding the -webkit prefix, the issue remains unresolved. Can anyone provide assistance?
I drew inspiration from this website, which seemed to have a working solution for IE 11. However, I am unsure of what is causing the discrepancy in my implementation.
div.zigzag > .container {
padding-bottom: 40px;
padding-top: 20px;
}
.zigzag {
position: relative;
}
.zigzag:before {
content: "";
display: block;
position: absolute;
top: -10px;
width: 100%;
height: 10px;
}
.zigzag:after {
content: "";
display: block;
position: absolute;
width: 100%;
height: 10px;
}
/* blue */
.blue {
background: #2c7892;
color: #fff;
}
.zigzag.blue:before {
background: linear-gradient(45deg, transparent 33.333%, #2c7892 33.333%, #2c7892 66.667%, transparent 66.667%), linear-gradient(-45deg, transparent 33.333%, #2c7892 33.333%, #2c7892 66.667%, transparent 66.667%);
background: -webkit-linear-gradient(45deg, transparent 33.333%, #2c7892 33.333%, #2c7892 66.667%, transparent 66.667%), -webkit-linear-gradient(-45deg, transparent 33.333%, #2c7892 33.333%, #2c7892 66.667%, transparent 66.667%);
background-size: 10px 20px;
}
.zigzag.blue:after {
background: linear-gradient(45deg, #2c7892 33.333%, transparent 33.333%, transparent 66.667%, #2c7892 66.667%), linear-gradient(-45deg, #2c7892 33.333%, transparent 33.333%, transparent 66.667%, #2c7892 66.667%);
background: -webkit-linear-gradient(45deg, #2c7892 33.333%, transparent 33.333%, transparent 66.667%, #2c7892 66.667%), -webkit-linear-gradient(-45deg, #2c7892 33.333%, transparent 33.333%, transparent 66.667%, #2c7892 66.667%);
background-size: 10px 20px;
}<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row clearfix zigzag blue">
<div class="container">
<div class="col-md-12 column">
Some Text Here.
</div>
</div>
</div>