# Card

index.html

<html>

<head>
    <title>Card</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="card">
        <div class="right-part">

        </div>
    </div>
</body>

</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

style.css

body {
    background-color: #4d4d4d;
}

.card {
    background-image: url("img.jpg");
    background-position: center;
    background-size: cover;
    width: 700px;
    height: 400px;
    border-radius: 10px;
    box-shadow: 0px 13px 57px -16px rgba(0, 0, 0, 0.67);
    overflow: hidden;
}

.right-part {
    width: 600px;
    height: 400px;
    background-color: rgba(255, 255, 255, .5);
    transform: skewX(25deg) translateX(-200px);
    text-align: center;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

img.jpg