ال Code الموجود في الدرس
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>CSS</title>
<link rel="stylesheet" href="css/master.css" />
</head>
<body>
<h2>Test Title</h2>
<div>Transform</div>
</body>
</html>h2 {
position: relative;
color: white;
margin: 20px auto;
width: fit-content;
padding: 20px;
}
h2::before {
content: "";
background-color: red;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: -1;
transform: skewX(20deg);
}
div {
margin: 200px auto;
width: 200px;
height: 200px;
background-color: rgb(255 0 0 / 39%);
color: white;
display: flex;
justify-content: center;
align-items: center;
font-weight: bold;
font-size: 30px;
transform: skewX(10deg);
transform: skewX(-10deg);
transform: skewY(10deg);
transform: skewY(-10deg);
transform: skew(10deg, 10deg);
}