Eğimli div ifadesi tam olarak doğru olmayabilir, ama aşağıdaki görsel ile clip-path kullanımını daha güzel gösterebilirim diye düşünüyorum. Öncekle arka planına bir renk attığımız aşağıdaki gibi bir div hazırlayalım:
Şimdi bu div'in sağ alt bölümünü biraz yukarı kaldırarak eğimli bir tabanı olmasını sağlayalım, işte burada clip-path kullanacağız.
clip-path: polygon(0 0, 100% 0, 100% 200px, 0 100%);
Projenin tamamlanmış kodları aşağıdaki gibidir:
HTML ve CSS Kodları:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Eğimli CSS Div</title>
<style>
*{padding: 0; margin: 0;}
.alan{
width: 20%; height: 60vh; background-color: blueviolet; margin: 20px;
clip-path: polygon(0 0, 100% 0, 100% 200px, 0 100%);
}
</style>
</head>
<body>
<div class="alan">
</div>
</body>
</html>