JSFiddle - React, Tailwind, and code Playground

by Liu David

HTML

<div class="upper">
    hello world!
  </div>
<div>

<div class="border">

</div>
  
    
</div>

CSS

/* border-serrated - a zig zag triangle border with linear gradient
*/

.upper{
  background:#fff;
  height:100px;
}
.border {
  background: #f2f2f2;
  color: #f2f2f2;
  text-align: center;
  position: relative;
  padding-top: 10px;
  /* border:solid 1px red; */
}

.border:before {
  /* border:solid 1px red; */
  top: 0px;
  background-position: left top;
  background: -webkit-linear-gradient(-135deg, #ffffff 5px, transparent 0), -webkit-linear-gradient(135deg, #ffffff 5px, transparent 0);
  background: linear-gradient(-135deg, #ffffff 5px, transparent 0), linear-gradient(135deg, #ffffff 5px, transparent 0);
  content: " ";
  display: block;
  position: absolute;
  left: 0px;
  width: 100%;
  height: 10px;
  background-repeat: repeat-x;
  background-size: 10px 10px;
  -webkit-filter: drop-shadow(rgba(0, 0, 0, 0.2) 1px 2px 1px);
}