0

Update: My question was previously linked to this solution, but I was hoping if there is a way to have it as a background image instead of making use of the image tag?

I'm trying to solve a scaling issue I have with SVGs once I've added the clip-path property in CSS.

HTML:

.featured-menu__item {
  position: relative;
  height:0;
  width: 20vw; 
  padding-bottom: 30vw; 
  margin: auto;
}

.image-overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  clip-path: url(#svgClip);
}

svg {
  position: absolute; 
  height: 100%; 
  width: 100%; 
  left: 0; 
  top:0;
}
<div class="featured-menu__item item-two">
  <div class="image-overlay" style="background: url('https://www.metoffice.gov.uk/binaries/content/gallery/metofficegovuk/hero-images/weather/cloud/cumulus-cloud.jpg') center center; background-size: cover;">
  </div>

  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 73.08 100">
    <clipPath id="svgClip">
      <path fill="#FFCBCB" fill-rule="evenodd" d="M36.5384615,0 C56.7180966,0 73.0769231,16.3588264 73.0769231,36.5384615 L73.0769231,36.5384615 L73.0769231,100 L1.0658141e-13,100 L1.0658141e-13,36.5384615 L0.00489510992,35.9342313 C0.32755861,16.0332858 16.5606228,0 36.5384615,0 Z"/>
      </clipPath>
     </svg>
   </div>

<div class="featured-menu__item item-two">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 73.08 100">
      <path fill="#FFCBCB" fill-rule="evenodd" d="M36.5384615,0 C56.7180966,0 73.0769231,16.3588264 73.0769231,36.5384615 L73.0769231,36.5384615 L73.0769231,100 L1.0658141e-13,100 L1.0658141e-13,36.5384615 L0.00489510992,35.9342313 C0.32755861,16.0332858 16.5606228,0 36.5384615,0 Z"/>
     </svg>
   </div>

https://codepen.io/floreso/pen/MWjmBJy

I have two shapes from the link above. The first one has the clip-path property added to it and the second one without. As you can see, the second one is quite responsive and I would like to have the first one behave like that. But once I add the clip-path property, the scaling stops.

Would you guys know what I'm missing here?

TylerH
  • 20,799
  • 66
  • 75
  • 101
Josh
  • 1
  • 2
  • the linked solution works with image or background-image. The element is irrelevant, mask apply to everything – Temani Afif Dec 17 '20 at 12:01
  • "*I was hoping if there is a way to have it as a background image instead of making use of the image tag?*" The solution in the linked question applies just as well to background-image properties as it does to image element properties. – TylerH Dec 21 '20 at 14:36

0 Answers0