CODEWITHSUNDEEP
htmlcss
noor shal
noor shal

Reputation: 13

underline with decreasing thickness style

Any idea how to implement this decreasing thickness underline using css: (Example image)

I've tried to use border bottom, but couldn't give the decreasing thickness effect

Upvotes: 1

Views: 92

Answers (2)

Narek Elbakyan
Narek Elbakyan

Reputation: 182

You can use clip-path property. For more link

p {
  position: relative;
  font-size: 30px;
  width: fit-content;
}

p span {
  position: relative;
  z-index: 2;
}

p:after {
  background: orange;
  clip-path: polygon(0 80%, 0% 100%, 100% 100%);
  position: absolute;
  width: 80%;
  content: '';
  height: 100%;
  left: 0;
  bottom: 0;
}
<p>
  <span>Training & Development</span>
</p>

Upvotes: 3

Mateusz
Mateusz

Reputation: 308

It's not just underline or border;

You should use :before in CSS and position: absolute; on it and position: relative; on the parent.

The code would be:

    .underline {
        position: relative;
        font-size: 32px;
    }

    .underline:before {
        content: '';
        position: absolute;
        left: 0;
        bottom: 0;
        width: 0;
        height: 0;
        border-bottom: 5px solid orange;
        border-right: 300px solid transparent;
        z-index: -1;
    }
<span class="underline">Training & Development</span>

border-bottom: 5px <- here you can set the starting height of the underline.

border-right: 100px <- here you can set the width of the underline.

Read more about creating shapes in CSS here: https://css-tricks.com/the-shapes-of-css/

Upvotes: 4

Related Questions