How to hide bottom side Css

user_13557786 0
Viewed 151

Here is what I have tried:

 &__ellipse {
        width: 297px;
        height: 297px;
        border-radius: 50%;
        background: $orange;
        position: relative;

        img {
          position: absolute;
          bottom: 0;
          right: 20px;
        }
      }

How can I hide only the bottom side? Something like this overflow-bottom: hide, or clip path enter image description here

sass css jquery javascript
1 Answers

I would do it like below using mask and gradient:

.box {
  margin: auto;
  padding: 0 35px 32px 0; /* to rectify the image position */
  max-width: 200px;
  /* the orange circle with gradient */
  background: radial-gradient(circle closest-side, orange 85%, transparent 86%);
  -webkit-mask: 
    /* show only the orange circle (same as background  */
    radial-gradient(circle closest-side, orange 85%, transparent 86%),
    /* and also show 70% from the top */ 
    linear-gradient(#fff, #fff) top/100% 70% no-repeat; 
}

.box img {
  display: block;
  width: 100%;
}
<div class="box">
  <img src="https://i.stack.imgur.com/8Kjvd.png">
</div>

Another version using multiple backoground. Easier to manage and responsive

.box {
  display:inline-block;
  --grad:radial-gradient(circle closest-side at 50% 58%, orange 97%, transparent 98%);
  background: 
    url(https://i.stack.imgur.com/8Kjvd.png) 0 50%/contain no-repeat, var(--grad);
  -webkit-mask: var(--grad), linear-gradient(#fff, #fff) top/100% 70% no-repeat;
}

.box::before {
  content: "";
  display: block;
  padding-top: 100%;
}
<div class="box" style="width:300px"></div>
<div class="box" style="width:200px"></div>
<div class="box" style="width:100px"></div>

user_86203330
Related