Skip to content Skip to sidebar Skip to footer
Home / Css / Html

Skew One Side Of Image While Keeping Border-radius

Post a Comment
TLDR; is this shape possible using vanilla CSS? tried skewing but it applies to the entire image and therefore rules out the 'skew one side' part of the problem.

Solution 1:

You need something like this.

div {
  width: 300px;
  height: 200px;
  margin: 10px90px;
  border-radius: 30px;
  overflow: hidden;
  -webkit-transform: perspective(300px) rotateX(-19deg);
  -o-transform: perspective(300px) rotateX(-30deg);
  -moz-transform: perspective(300px) rotateX(-30deg);
  -webkit-transform-origin: 100%50%;
  -moz-transform-origin: 100%50%;
  -o-transform-origin: 100%50%;
  transform-origin: 100%50%;
}

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><div><imgsrc="https://static.scientificamerican.com/sciam/cache/file/4E0744CD-793A-4EF8-B550B54F7F2C4406_source.jpg"></div></body></html>

Ping me if it works for you.

Solution 2:

With some extra wrapper it's doable:

.box {
  display:inline-block;
  border-radius:25px;
  overflow:hidden;
}
.boxdiv {
  border-radius:inherit;
  transform-origin:top;
  transform:skew(20deg);
  overflow:hidden;
}
.boxdivimg {
  display:block;
  transform-origin:inherit;
  transform:skew(-20deg);
}
<divclass="box"><div><imgsrc="https://picsum.photos/id/1069/300/200" ></div></div>

Post a Comment for "Skew One Side Of Image While Keeping Border-radius"