Skew One Side Of Image While Keeping Border-radius
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: 10px 90px;
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>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>
<img src="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;
}
.box div {
border-radius:inherit;
transform-origin:top;
transform:skew(20deg);
overflow:hidden;
}
.box div img {
display:block;
transform-origin:inherit;
transform:skew(-20deg);
}<div class="box">
<div>
<img src="https://picsum.photos/id/1069/300/200" >
</div>
</div>
Post a Comment for "Skew One Side Of Image While Keeping Border-radius"