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

.irregular-1 {
  padding-bottom:10px;
}

.irregular-1:before,
.irregular-1:after {
  content: "";
  position: absolute;
  inset: auto calc(50% - 1px) 0 0;
  height: 2px;
  clip-path: inset(0 100% 0 0);
  background: 
    linear-gradient(currentColor 0 0) 0 100%/50% 2px,
    linear-gradient(currentColor 0 0) center/2px 100%,
    linear-gradient(currentColor 0 0) 100% 0/50% 2px,
    linear-gradient(currentColor 0 0) right /2px 100%;
  background-repeat: no-repeat;
  transition: .3s .3s,height .3s;
}
.irregular-1:after {
  transform-origin: calc(100% - 1px) calc(100% - 1px);
  transform: scale(-1);
}
.irregular-1:hover:before,
.irregular-1:hover:after {
  clip-path: inset(0);
  height: 8px;
  transition: .3s,height .3s .3s;
}


.irregular-2 {
  padding-bottom:10px;
}

.irregular-2:before{
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 2px;
  clip-path: inset(0 100% 0 0);
  background: 
    repeating-linear-gradient(90deg, currentColor 0 10px,#0000 0 20px) bottom/120% 2px,
    repeating-linear-gradient(90deg, #0000 0 10px,currentColor 0 20px) top   /120% 2px,
    repeating-linear-gradient(90deg, currentColor 0 2px ,#0000 0 10px) center/120% 100%;
  background-repeat: no-repeat;
  transition: .3s .3s,height .3s;
}
.irregular-2:hover:before{
  clip-path: inset(0);
  height: 10px;
  transition: .3s,height .3s .3s;
}


.irregular-3 {
  padding-bottom:10px;
}

.irregular-3:before,
.irregular-3:after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 2px;
  clip-path: inset(0 100% 0 0);
  background: 
    linear-gradient(currentColor 0 0) bottom/100% 2px,
    linear-gradient(currentColor 0 0) right /2px 100%,
    repeating-linear-gradient(90deg,currentColor 0 2px,#0000 0 calc((100% - 2px)/15));
  background-repeat: no-repeat;
  transition: .3s .3s,height .3s;
}
.irregular-3:after {
  inset: auto 0 8px 0;
  height: 2px;
  background: currentColor;
  clip-path: inset(0 0 0 100%);
}
.irregular-3:hover:before,
.irregular-3:hover:after {
  clip-path: inset(0);
  transition: .3s,height .3s .3s;
}
.irregular-3:hover:before {
  height: 10px;
}

.irregular-4 {
  padding-bottom:10px;
  clip-path: inset(0);
}

.irregular-4:before,
.irregular-4:after {
  content: "";
  position: absolute;
  inset: auto 50% 0 -10px;
  height: 8px;
  clip-path: inset(0 100% 0 0);
  border: 2px solid;
  transform: scale(var(--s,1)) translate(-8px) skewX(-30deg);
  transform-origin: right;
  transition:.4s;
}
.irregular-4:after {
  --s:-1;
}
.irregular-4:hover:before,
.irregular-4:hover:after {
  clip-path: inset(0);
}

.irregular-5 {
  padding-bottom:10px;
}

.irregular-5:before,
.irregular-5:after {
  content: "";
  position: absolute;
  inset: auto 50% -5px 0;
  height: 5px;
  clip-path: inset(0 100% 0 0);
  border:  solid;
  border-width: 2px 0;
  transform-origin: right;
  transform:scaleX(var(--s,1)) skewY(7deg);
  transition:.4s;
}
.irregular-5:after {
  --s: -1;
}
.irregular-5:hover:before,
.irregular-5:hover:after {
  clip-path: inset(0);
}


.irregular-6 {
  padding-bottom:12px;
  clip-path: inset(0 0 16px);
  transition: .3s;
}

.irregular-6:before {
  content: "";
  position: absolute;
  inset: auto auto 0 0;
  height:15px;
  width: 22px;
  --c: linear-gradient(currentColor 0 0);
  background: 
    var(--c) left     /16px 2px,
    var(--c) 7px 0    /2px 100%,
    var(--c) top      /7px 2px,
    var(--c) 14px 0   /2px  50%,
    var(--c) 100% 100%/15px 2px,
    var(--c) 100% 100%/2px 50%;
  background-repeat: no-repeat;
  filter: drop-shadow(20px 0px 0px black) drop-shadow(40px 0px 0px black) drop-shadow(80px 0px 0px black) drop-shadow(161px 0px 0px black);
}

.irregular-6:hover {
  clip-path: inset(0);
}

/**/
[class] {
  display:inline-block;
  font-size:40px;
  font-family:sans-serif;
  margin:25px;
  cursor:pointer;
  position: relative;
}
[class]:before,
[class]:after {
  pointer-events: none;
}
body {
  text-align:center;
}