JSFiddle - React, Tailwind, and code Playground

by makingthings

HTML

<div class="page">
 <div class="horizontal-rule">
  <span class="first"></span>
  <span class="second"></span>
  <span class="third"></span>
 </div>
</div>

CSS

body{background:#eee}

.page{width: 90%; margin: 0 auto;} 

.horizontal-rule{margin:0;position:relative;height:0;border-top:1px solid #ddd;border-bottom:1px solid #fff;z-index:-99}

.horizontal-rule span{position:absolute;display:block;border:none;height:80px;top:0px;z-index:-100;margin:0;padding:0;_display:none}


.horizontal-rule .first{background:no-repeat url(//s.ytimg.com/yt/imgbin/www-dividers-vflkSTcwN.png) 0 0;background:-webkit-radial-gradient(bottom right,circle,rgba(0,0,0,0.06),rgba(0,0,0,0) 80px);background:-moz-radial-gradient(bottom right,rgba(0,0,0,0.06),rgba(0,0,0,0) 80px);width:80px;left:0}



.horizontal-rule .second{background:no-repeat url(//s.ytimg.com/yt/imgbin/www-dividers-vflkSTcwN.png) -114px 0;background:-webkit-radial-gradient(bottom left,circle,rgba(0,0,0,0.06),rgba(0,0,0,0) 80px);background:-moz-radial-gradient(bottom left,rgba(0,0,0,0.06),rgba(0,0,0,0) 80px);width:80px;right:0}


.horizontal-rule .third{position:relative;margin-left:80px;margin-right:80px;top:0;background:url(//s.ytimg.com/yt/img/refresh/horizontal_rule-vflnwaP_x.png);background:-webkit-linear-gradient(bottom,rgba(0,0,0,0.06),rgba(0,0,0,0) 80px);background:-moz-linear-gradient(bottom,rgba(0,0,0,0.06),rgba(0,0,0,0) 80px)}