How to crop an element and keep the size adjusted - html

Question

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

Answer 1

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>

Answer 2

You should specify the width of each star, which is 36px in this case. Then you can just set the width to 16px for the last star and add overflow hidden.
div{
display:flex;
justify-content: space-evenly;
width:180px;
}
i{
color: yellow;
width: 36px;
}
.half-star {
overflow: hidden;
width: 16px;
}
<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 half-star"></i>
</div>

Answer 3

You can use the clip property and just for example do that
clip: rect(0px,60px,200px,0px); it should split it in half

Answer 4

Use fa-star-half as an alternative to custom styles. This will ensure dynamicity.
div {
display: flex;
justify-content: space-evenly;
width: 180px;
}
i {
color: yellow;
}
<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-half"></i>
</div>
Solution w/o fa-star-half.
I called your custom span with the customs styles .custom. This solution requires removing justify-content: space-evenly and uses a calculated width on your span's that are not custom.
However, you still want the .custom span to be factored into this width. So you can set something like span:not(.custom) { width: calc(100% / 3); } Then, you will want to set text-align: center; to the non custom spans's also.
div {
display: flex;
width: 180px;
}
i {
color: yellow;
}
span.custom i {
position: relative;
left: 50%;
}
span.custom {
overflow: hidden;
}
span:not(.custom) {
width: calc(100% / 3);
text-align: center;
}
span {
outline: black 1px dotted;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.7.1/css/all.min.css">
<div>
<span>
<i class="fas fa-2x fa-star"></i>
</span>
<span>
<i class="fas fa-2x fa-star"></i>
</span>
<span class="custom">
<i class="fas fa-2x fa-star"></i>
</span>
</div>

Answer 5

If you're looking to make the star half, you could use <i class="fa fa-star-half-o" aria-hidden="true"></i> instead of trying to crop it in half and then fit to the content.
Please let me know if I have misunderstood your question.
EDIT:
I would make a parent container for each star that is responsible for the width and height, and let the child base its width on the preferred percentage.
.star-row {
display: flex;
gap: 5px;
}
i {
color: yellow;
overflow: hidden;
}
.last-star {
width: 50%;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.7.1/css/all.min.css">
<div class="star-row">
<div class="star-container">
<i class="fas fa-2x fa-star"></i>
</div>
<div class="star-container">
<i class="fas fa-2x fa-star last-star"></i>
</div>
</div>

Answer 6

I cropped the stars using a span outside (and I replaced the div with span).
span{
display:flex;
justify-content: space-evenly;
overflow: hidden;
width: 95px;
}
i{
color: gold;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.7.1/css/all.min.css">
<span>
<i class="fas fa-2x fa-star"></i>
<i class="fas fa-2x fa-star"></i>
<i class="fas fa-2x fa-star" style="width:calc(36px / 2);"></i>
</span>

Answer 7

it's simple you just need to use negative for margin element.
margin-right:-18px;
div{
display:flex;
justify-content: space-evenly;
width:180px;
}
i{
color: yellow;
}
span i{
margin-right:-18px;
}
span{
background:red;
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>

Answer 8

Using clip-path can be a practical solution for this case.
It's not size dependent, and you can use any value between 0-100% for the --percentage variable.
div{
display:flex;
justify-content: space-evenly;
width:180px;
}
i{
color: yellow;
}
i:last-child{
--percentage: 50%;
clip-path: polygon(0 0, var(--percentage) 0, var(--percentage) 100%, 0 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>
</span>
</div>
If the last star bounding box is a concern, you should be able to achieve that by providing a width like this.
div{
display:flex;
justify-content: space-evenly;
width: 180px;
--star-count: 5;
--star-width: calc(100% / var(--star-count));
--last-star-crop: 1/2;
}
i{
width: var(--star-width);
color: yellow;
}
i:last-child{
width: calc(var(--star-width) * var(--last-star-crop));
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>
<i class="fas fa-2x fa-star"></i>
</span>
</div>
Note: FontAwesome uses font-size to dictate icon sizing, due to that smaller container widths can cause distortion.