Search code examples
cssclip-path

CSS Clip Path align circle to left side

I want to make a gdpr consent floater that expands once on page load and on hover. I found that CSS clip-path might be a great solution.

On the default state, I want only to show a circle with the consent icon.

enter image description here

On the hover state, I want to show the circle and the text.

enter image description here

As you can see in the first image, the circle isn't perfect. Using clip-path: circle(); would make a perfect circle, but it is centered by default. Adding any parameters makes things a guessing game. clip-path: circle(19% at 13% 50%); is approx. what I want, however it's neighter perfect nor do I think it's good practice. It would break with other translations of the word or when changing the font etc.

So, can I use clip path to make a perfect circle that is calculated by the height of the element (therefore radius 50% of height) and that is aligned to the left of the element?

SCSS

.gdpr__floating_container {

  &__animate {
    animation: gdpr__floating_container ease-in-out 1500ms;
    @keyframes gdpr__floating_container {
      50% {
        clip-path: circle(100%);
      }
    }
  }

  clip-path: circle(19% at 13% 50%);
  transition: clip-path 750ms;

  &:hover {
    clip-path: circle(100%);
  }

}

HTML

<div class="gdpr__floating_container rounded-pill bg-dark text-light" style="font-size: 1.2rem; cursor: pointer; position: fixed; display: flex; left: 1vw; bottom: 1vw; align-items: center;">
   <button type="button" class="btn btn-link text-primary" style="font-size: 1.5rem;">
      <svg class="icon">
         <use href="/fontawesome/sprites/solid.svg#cookie-bite"></use>
      </svg>
   </button>
   <span class="pr-4">Datenschutz</span>
</div>
Solution

  • The original question was: can clip-path: circle() be aligned left in a none squared rectangle.

    The answer is mostly no, unless you align it manually with pixels. E.g.: clip-path: circle(25px at 25px 50%);.

    Aligning at 0 creates a half circle, therefore it has to be positioned exactly at 1x radius (25px in this example).

    This works, however, only on fixed dimensioned objects. No luck for more dynamic boxes.