This is a div that stretches the whole mobile screen; I'd want it to have a tilted curve(as shown in image) from top-right to top-left. I tried border-radius but that didn't work as expected.
Is there a way to do this using CSS?
Asked
Active
Viewed 165 times
2
gopal prabhu
- 213
- 1
- 3
- 10
-
You can use [css transform rotate](https://www.w3schools.com/cssref/css3_pr_transform.asp) for that. – M.A Shahbazi Jun 28 '21 at 16:52
-
I think u should use svgs instead. – Akash Jun 28 '21 at 16:52
-
If i use rotate, the contents inside would also rotate right? – gopal prabhu Jun 28 '21 at 16:58
-
i cant use svg, its the div i need to get a slanted-curve – gopal prabhu Jun 28 '21 at 16:59
1 Answers
1
Perhaps clip-path property might work for you.....
.container {
background: #f6eee0;
clip-path: polygon(0 10%, 100% -2%, 100% 100%, 0 100%);
height: 80vh;
}<!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>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container"></div>
</body>
</html>Here is the updated snippet including the curve, if you need to increase/decrease the size of the curve just play around with the negative value in the clip-path property until you find the sweet spot and suits you the best...
Uzair Saiyed
- 575
- 1
- 6
- 16
-
Hey Uzair, This Helps a lot, Thanks. btw Is there a way to get the Curve too? (If you notice the provided image, its not a Straight line, has a small curve..) – gopal prabhu Jun 28 '21 at 18:54
-
Hey @gopalprabhu I thought there was a curve but due to the color of the image, it was kind of hard to see, and yes the curve is indeed possible, I am updating my code for the same....... – Uzair Saiyed Jun 29 '21 at 00:23