<div class="irregular-1">1. Hover me </div>
<div class="irregular-2">2. Hover me </div>
<div class="irregular-3">3. Hover me </div>
<div class="irregular-4">4. Hover me </div>
<div class="irregular-5">5. Hover me </div>
<div class="irregular-6">6. Hover me </div>
<div class="irregular-7">7. Hover me </div>
<div class="irregular-8">8. Hover me </div>

 .irregular-1 {
   padding-bottom:10px;
   background:
    linear-gradient(90deg,currentColor  50%,#0000 0) bottom 3px left 0,   
    linear-gradient(90deg,#0000 50%,currentColor  0) bottom 0 left 0;
  background-size:12px 7px;
  background-repeat:repeat-x;
   -webkit-mask:
      linear-gradient(#000 0 0) top        /100% calc(100% - 12px),
      linear-gradient(#000 0 0) bottom left/var(--p,0%) 12px;
   -webkit-mask-repeat:no-repeat;
   transition: 0.5s; 
 }
 .irregular-1:hover {
   --p:100%;
 }

.irregular-2 {
   padding-bottom:10px;
   background:
    conic-gradient(from 135deg at top   ,currentColor  90deg,#0000 0) bottom 4px left 6px,   
    conic-gradient(from -45deg at bottom,currentColor  90deg,#0000 0) bottom 0   left 0;
  background-size:13px 7px;
  background-repeat:repeat-x;
   -webkit-mask:
      linear-gradient(#000 0 0) top        /100% calc(100% - 12px),
      linear-gradient(#000 0 0) bottom left/var(--p,0%) 12px;
   -webkit-mask-repeat:no-repeat;
   transition: 0.5s; 
 }
 .irregular-2:hover {
   --p:100%;
 }

.irregular-3 {
   padding-bottom:10px;
   background:
    radial-gradient(circle 6px at bottom,currentColor 95%,#0000) bottom 4px left 9px,   
    radial-gradient(circle 6px at top   ,currentColor 95%,#0000) bottom 0   left 0;
  background-size:17px 6px;
  background-repeat:repeat-x;
   -webkit-mask:
      linear-gradient(#000 0 0) top        /100% calc(100% - 12px),
      linear-gradient(#000 0 0) bottom left/var(--p,0%) 12px;
   -webkit-mask-repeat:no-repeat;
   transition: 0.5s; 
 }
 .irregular-3:hover {
   --p:100%;
 }

 .irregular-4 {
   padding-bottom:10px;
   background:
    radial-gradient(circle 6px,currentColor 92%,#0000) bottom/50% 12px,
    linear-gradient(currentColor 0 0) bottom 4px center/100% 4px;
  background-repeat:repeat-x;
   -webkit-mask:
      linear-gradient(#000 0 0) top    /100% calc(100% - 12px),
      linear-gradient(#000 0 0) bottom /var(--p,0%) 12px;
   -webkit-mask-repeat:no-repeat;
   transition: 0.5s; 
 }
 .irregular-4:hover {
   --p:100%;
 }

  .irregular-5 {
   padding-bottom:10px;
   background:
    linear-gradient(90deg,currentColor 12px,#0000 0) bottom 0 left -6px/50% 12px,
    linear-gradient(currentColor 0 0) bottom 4px center/100% 4px;
  background-repeat:repeat-x;
   -webkit-mask:
      linear-gradient(#000 0 0) top    /100% calc(100% - 12px),
      linear-gradient(#000 0 0) bottom /var(--p,0%) 12px;
   -webkit-mask-repeat:no-repeat;
   transition: 0.5s; 
 }
 .irregular-5:hover {
   --p:100%;
 }

  .irregular-6 {
   padding-bottom:10px;
   background:
    conic-gradient(from 135deg at top   ,currentColor  90deg,#0000 0) bottom 7px left 50% /50% 7px,   
    conic-gradient(from -45deg at bottom,currentColor  90deg,#0000 0) bottom 0   left 50% /50% 7px,
    linear-gradient(currentColor 0 0) bottom 5px center/100% 4px;
  background-repeat:repeat-x;
   -webkit-mask:
      linear-gradient(#000 0 0) top    /100% calc(100% - 14px),
      linear-gradient(#000 0 0) bottom /var(--p,0%) 14px;
   -webkit-mask-repeat:no-repeat;
   transition: 0.5s; 
 }
 .irregular-6:hover {
   --p:100%;
 }

  .irregular-7 {
   padding-bottom:10px;
   background:radial-gradient(30% 30%,#0000 95%,currentColor) bottom/12px 12px;
  background-repeat:repeat-x;
   -webkit-mask:
      linear-gradient(#000 0 0) top    /100% calc(100% - 14px),
      linear-gradient(#000 0 0) bottom /var(--p,0%) 14px;
   -webkit-mask-repeat:no-repeat;
   transition: 0.5s; 
 }
 .irregular-7:hover {
   --p:100%;
 }

  .irregular-8 {
   padding-bottom:10px;
   background:
     conic-gradient(from   45deg at left  2px top 50%,#0000 90deg,currentColor 0) bottom/13px 13px,
     conic-gradient(from -135deg at right 2px top 50%,#0000 90deg,currentColor 0) bottom/13px 13px;
  background-repeat:repeat-x;
   -webkit-mask:
      linear-gradient(#000 0 0) top    /100% calc(100% - 14px),
      linear-gradient(#000 0 0) bottom /var(--p,0%) 14px;
   -webkit-mask-repeat:no-repeat;
   transition: 0.5s; 
 }
 .irregular-8:hover {
   --p:100%;
 }

/**/
[class] {
  display:inline-block;
  font-size:40px;
  font-family:sans-serif;
  margin:25px;
  cursor:pointer;
}
body > [class]:nth-child(odd) {
  color:darkblue;
}
body {
  text-align:center;
}