How to crop an element and keep the size adjusted

Issue

I have an element which I would like to crop x% of it from the right, and so the width will automatically decrease by half to fit the new content.

Currently I'm using this:

div{
  display:flex;
  justify-content: space-evenly;
  width:180px;
}
i{
  color: yellow;
}
span i{
  position:relative;
  left: 50%;

}
span{
  overflow: hidden;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.7.1/css/all.min.css">
<div>
    <i class="fas fa-2x fa-star"></i>
    <i class="fas fa-2x fa-star"></i>
    <span> 
    <i class="fas fa-2x fa-star"></i>
  </span>

</div>

But as you can see when using it the span keeps it's original width and doesn't crop
Or using clip-path

so it creates an extra gap between the half star and the solid star before/after it.

---

I have tried using transform: translateX(-x%); on the container but it sabotages the entire layout and every element positioned after it gets a x% offset.

---

Is there a way to crop the element and so it's size?

---

NOTE: the real element size is dynamic. I prefer a pure css solution that doesn't evolve using constants /JS

Thanks

Solution

edit, after understanding the question, you may use width + overflow

If it is dynamic and can show up many times, you may use var() to update the value on the fly

examples

Why do i use em for sizing ? - because its size is about its own font-size : here : fa-2x in your question , which em will match even if the class turns to be fa-4x .

div{
  display:flex;
  justify-content: space-evenly;
  width:180px;
  margin:1em;
  filter:drop-shadow(0 0 3px)
}
i{
  color: yellow;
}
div i:last-of-type{
width: var(--size);
overflow:hidden;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.7.1/css/all.min.css">


<div style="--size: calc(1em * 0.3)">
    <i class="fas fa-2x fa-star"></i>
    <i class="fas fa-2x fa-star"></i>
    <i class="fas fa-2x fa-star"></i>30%
    
</div>
<div style="--size: calc(1em * 0.6)">
    <i class="fas fa-2x fa-star"></i>
    <i class="fas fa-2x fa-star"></i>
    <i class="fas fa-2x fa-star"></i>60%
</div>


<div style="--size: calc(1em * 0.7)">
    <i class="fas fa-2x fa-star"></i>
    <i class="fas fa-2x fa-star"></i>
    <i class="fas fa-2x fa-star"></i>70%
</div>

---

You may use clip-path, it will allow you to cut off a portion of the element . % can be used .

It also can allow you to cut it off with different shapes .

This will help you create your first clip-path https://bennettfeely.com/clippy/

specification https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path

examples

div{
  display:flex;
  justify-content: space-evenly;
  width:180px;
  margin:1em;
  filter:drop-shadow(0 0 3px)
}
i{
  color: yellow;
}
div i:last-of-type{
clip-path: polygon(0 0, 60% 0, 60% 100%, 0% 100%);
}

/*cut half of its surface  , but differently*/
[title] i:last-of-type{
clip-path: polygon(0 40%, 100% 40%, 100% 100%, 0% 100%);
}
[class] i:last-of-type{
clip-path: polygon(0 0, 100% 0, 0 100%, 0% 100%);
}

[id] i:last-of-type{
clip-path: polygon(0 0, 100% 0, 0 100%, 100% 100%);
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.7.1/css/all.min.css">
<div>
    <i class="fas fa-2x fa-star"></i>
    <i class="fas fa-2x fa-star"></i>
    <i class="fas fa-2x fa-star"></i>60%
</div>

<div title="2.6">
    <i class="fas fa-2x fa-star"></i>
    <i class="fas fa-2x fa-star"></i>
    <i class="fas fa-2x fa-star"></i>60%
</div>

<div class>
    <i class="fas fa-2x fa-star"></i>
    <i class="fas fa-2x fa-star"></i>
    <i class="fas fa-2x fa-star"></i>50%
</div>

<div id >
    <i class="fas fa-2x fa-star"></i>
    <i class="fas fa-2x fa-star"></i>
    <i class="fas fa-2x fa-star"></i>50%
</div>

Answered By - G-Cyrillus