<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>

.irregular-1 {
  padding-bottom: 10px;
  background:
    linear-gradient(90deg,currentColor calc(50% - 30px),#0000 0 calc(50% + 30px),currentColor 0) bottom 5px  left 0/100% 2px,
    linear-gradient(90deg,#0000        calc(50% - 30px),currentColor 0 calc(50% + 30px),#0000 0) bottom 10px left 0/100% 2px,
    linear-gradient(90deg,#0000        calc(50% - 30px),currentColor 0 calc(50% + 30px),#0000 0) bottom 0px  left 0/100% 2px,
    linear-gradient(currentColor 0 0) bottom 0px left calc(50% - 30px)/2px 12px,
    linear-gradient(currentColor 0 0) bottom 0px left calc(50% + 30px)/2px 12px;
  background-repeat: no-repeat;  
  -webkit-mask:
      linear-gradient(#000 0 0) top    /100% calc(100% - 12px),
      linear-gradient(#000 0 0) bottom right/var(--p,0%) 12px,
      linear-gradient(#000 0 0) bottom left /var(--p,0%) 12px;
   -webkit-mask-repeat:no-repeat;
   transition: 0.4s linear; 
}
.irregular-1:hover {
   --p:51%;
}

.irregular-2 {
  padding-bottom: 10px;
  background:
    linear-gradient(90deg,#0000 30px,currentColor 0 calc(100% - 30px),#0000 0) bottom 5px  left 0/100% 2px,
    linear-gradient(90deg,currentColor 30px,#0000 0 calc(100% - 30px),currentColor 0) bottom 10px left 0/100% 2px,
    linear-gradient(90deg,currentColor 30px,#0000 0 calc(100% - 30px),currentColor 0) bottom 0px  left 0/100% 2px,
    linear-gradient(currentColor 0 0) bottom 0px left  30px/2px 12px,
    linear-gradient(currentColor 0 0) bottom 0px right 30px/2px 12px;
  background-repeat: no-repeat;
  -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.4s linear; 
}
.irregular-2:hover {
   --p:100%;
}

.irregular-3 {
  padding-bottom: 10px;
  background:
    repeating-linear-gradient(90deg,#0000 0 10px,currentColor 0 20px) bottom 5px  left -15px/200% 2px,
    repeating-linear-gradient(90deg,currentColor 0 10px,#0000 0 40px) bottom 10px left -35px/200% 2px,
    repeating-linear-gradient(90deg,currentColor 0 10px,#0000 0 40px) bottom 0px  left -15px/200% 2px,
    repeating-linear-gradient(90deg,#0000 0 8px,currentColor 0 10px,#0000 0 38px,currentColor 0 40px) bottom 0px  left -15px/200% 7px,
    repeating-linear-gradient(90deg,#0000 0 8px,currentColor 0 10px,#0000 0 38px,currentColor 0 40px) bottom 5px  left -35px/200% 7px;
  background-repeat: no-repeat;
  -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.4s linear; 
}
.irregular-3:hover {
   --p:100%;
}

.irregular-4 {
  padding-bottom: 10px;
  background:
    repeating-linear-gradient(90deg,#0000 0 10px,currentColor 0 20px) bottom 5px  left -15px/200% 2px,
    repeating-linear-gradient(90deg,currentColor 0 10px,#0000 0 20px) bottom 10px left -15px/200% 2px,
    repeating-linear-gradient(90deg,currentColor 0 10px,#0000 0 20px) bottom 0px  left -15px/200% 2px,
    repeating-linear-gradient(90deg,#0000 0 8px,currentColor 0 10px,#0000 0 18px,currentColor 0 20px) bottom 0px  left -15px/200% 12px;
  background-repeat: no-repeat;
  -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.4s linear; 
}
.irregular-4:hover {
   --p:100%;
}

.irregular-5 {
  padding-bottom: 10px;
  background:
    repeating-linear-gradient(90deg,#0000 0 10px,currentColor 0 20px) bottom 5px  left -15px/200% 2px no-repeat,
    radial-gradient(circle closest-side,#0000 calc(100% - 2px), currentColor calc(100% - 2px) 100%,#0000 100%) bottom 0 left -20px/20px 12px 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.4s linear; 
}
.irregular-5:hover {
   --p:100%;
}

.irregular-6 {
  padding-bottom: 10px;
  background:
    repeating-linear-gradient(90deg,#0000 0 10px,currentColor 0 20px) bottom 5px  left -15px/200% 2px no-repeat,
    repeating-linear-gradient(90deg,currentColor 0 10px,#0000 0 40px) bottom 10px left -15px/200% 2px no-repeat,
    repeating-linear-gradient(90deg,currentColor 0 10px,#0000 0 40px) bottom 0px  left -15px/200% 2px no-repeat,
    repeating-linear-gradient(90deg,#0000 0 8px,currentColor 0 10px,#0000 0 38px,currentColor 0 40px) bottom 0px  left -15px/200% 12px no-repeat,
    radial-gradient(circle closest-side,#0000 calc(100% - 2px), currentColor calc(100% - 2px) 100%,#0000 100%) bottom 0 left -10px/40px 12px 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.4s linear; 
}
.irregular-6:hover {
   --p:100%;
}

.irregular-7 {
  padding-bottom: 10px;
  background:
    repeating-linear-gradient(90deg,#0000 0 10px,currentColor 0 20px) bottom 5px  left -15px/200% 2px no-repeat,
    repeating-linear-gradient(90deg,currentColor 0 10px,#0000 0 20px) bottom 0px  left -15px/200% 2px no-repeat,
    radial-gradient(circle 6px at bottom,#0000 calc(100% - 2px), currentColor calc(100% - 2px) 100%,#0000 100%) bottom 7px left -21px/20px 6px repeat-x,
    repeating-linear-gradient(90deg,#0000 0 8px,currentColor 0 10px,#0000 0 18px,currentColor 0 20px) bottom 0px  left -15px/200% 7px no-repeat;
  -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.4s linear; 
}
.irregular-7:hover {
   --p:100%;
}
 
/**/
[class] {
  display:inline-block;
  font-size:40px;
  font-family:sans-serif;
  margin:25px;
  cursor:pointer;
}
div[class]:nth-child(odd) {
  color:darkblue;
}
body {
  text-align:center;
}