internet explorer - Zigzag border done by css not working in IE -
at clients site i'm using zigzag css border (for spead reasons avoid image usage - i'm using different colors , on).
my version working fine in chrome , firefox (using windows), not in internet explorer. i'm using ie 11 @ windws , not working. , i've no clue how fix it, i've added -webkit
prefix , nothing. me, please?
i inspired this site , seems working in ie 11, don't know different in case.
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"> text here. </div> </div> </div>
the problem caused display: table
property inherited bootstraps clearfix pseudo element.
ensure display: block
property applied making pseudo element more specific. simplest method append "div" before .zigzag:before
, .zigag:after
:
div.zigzag:before { content: ""; display: block; position: absolute; top: -10px; width: 100%; height: 10px; } div.zigzag:after { content: ""; display: block; position: absolute; width: 100%; height: 10px; }
Comments
Post a Comment