How to apply a specific shape to a div?

问题

I have this shape to do on a website:

Unfortunately, I don't exactly know how to do it.

I thought about clip-path, here is some code I tried:

HTML (Vue):

...
<div class="col-md-7">
  <q-gallery-carousel class="gallery-cropper" infinite autoplay :src="gallery"></q-gallery-carousel>
</div>

CSS:

.gallery-cropper {

  clip-path: polygon(
    100% 0%,
    100% 100%,
    10% 100%,
    0% 0%
  );
}

Which gives me this (photos are not the same but you get the thing):

Right now, I need to do the top left rounded corner. Do I have to enter all thousands of coordinates manually... ?

Also I know that clip-path isn't compatible with IE. I heard about loading a manual SVG, but again will I have to enter all coordinates manually ? And does a SVG apply to a <div> ?

回答1:

If the image is not going to change too often, applying the shape to the image via Photoshop should be quick an painless. If the image is going to be swapped out somewhat regularly then it makes more sense to create an overlay for the image(s).

Here's an example using an SVG but could be done with PNG.

.img-overlay {
  position: relative;
  max-width: 600px; /* prevents overlay from expanding beyond native width of image */
}
.img-overlay svg {
  position: absolute;
  top: 0;
  left: 0;
}

/* Make image responsive. */
.img-overlay img {
  max-width: 100%;
  display: block;
  height: auto;
}

<div class="img-overlay">
<img src="https://unsplash.it/600/400?image=84">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 400"><path d="M27,71.5a71.43,71.43,0,0,0,2.48,18.73L105,399H-71V0H98.5A71.5,71.5,0,0,0,27,71.5Z" fill="#b3b3b3"/></svg>
</div>

回答2:

We can achieve this with CSS3 skew() transformation.

Wrap img element in a container div with some appropriate border-top-left-radius value.
Apply some skewX() transformation to image container.
Apply same degree of skewX() transformation to img element but in opposite direction.

Required HTML:

<div class="image-holder">
  <img src="images/img.jpg" alt="Image Description" />
</div>

Necessary CSS:

.image-holder {
  border-top-left-radius: 70px;
  transform-origin: left top;
  transform: skewX(12deg);
  overflow: hidden;
}
.image-holder img {
  transform-origin: left top;
  transform: skewX(-12deg);
}

Output Image:

Working Example:

body {
  background: linear-gradient(teal, skyblue);
  min-height: 100vh;
  overflow: hidden;
}
.image-holder {
  border-top-left-radius: 70px;
  transform-origin: left top;
  transform: skewX(12deg);
  overflow: hidden;
}
.image-holder img {
  transform-origin: left top;
  transform: skewX(-12deg);
  display: block;
  height: auto;
  width: 100%;
}

<div class="image-holder">
  <img src="http://www.planwallpaper.com/static/images/b807c2282ab0a491bd5c5c1051c6d312_rP0kQjJ.jpg" />
</div>

回答3:

You should try using border-top-left-radius:

.gallery-cropper {
    clip-path: polygon(
    100% 0%,
    100% 100%,
    10% 100%,
    0% 0%
    );
    border-top-left-radius: 30px; /* change this value until reach the results */
}

来源：https://stackoverflow.com/questions/46200094/how-to-apply-a-specific-shape-to-a-div

标签

html

css

css3

svg

css-shapes