How to crop an element and keep the size adjust-CodePudding

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 ></i>
    <i ></i>
    <span> 
    <i ></i>
  </span>

</div>

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

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

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?

Thanks

CodePudding user response：

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 ></i>
  <i ></i>
  <i ></i>
</div>

CodePudding user response：

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

CodePudding user response：

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 ></i>
  <i ></i>
  <i ></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 ></i>
  </span>
  <span>
      <i ></i>
  </span>
  <span > 
    <i ></i>
  </span>
</div>

CodePudding user response：

If you're looking to make the star half, you could use <i 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 >
  <div >
    <i ></i>
  </div>
  <div >
    <i ></i>
  </div>
</div>

CodePudding user response：

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

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 ></i>
    <i ></i>
    <i ></i>30%
    
</div>
<div style="--size: calc(1em * 0.6)">
    <i ></i>
    <i ></i>
    <i ></i>60%
</div>


<div style="--size: calc(1em * 0.7)">
    <i ></i>
    <i ></i>
    <i ></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 ></i>
    <i ></i>
    <i ></i>60%
</div>

<div title="2.6">
    <i ></i>
    <i ></i>
    <i ></i>60%
</div>

<div class>
    <i ></i>
    <i ></i>
    <i ></i>50%
</div>

<div id >
    <i ></i>
    <i ></i>
    <i ></i>50%
</div>