Parallelogram with background-image

Developer
Olivier C
Size
2,401 Kb
Views
70,840
  1. Parallelogram with background-image Previews
  2. Parallelogram with background-image HTML Codes
  3. Parallelogram with background-image CSS Codes
  4. Parallelogram with background-image JS Codes

How do I make an parallelogram with background-image?

What is a parallelogram with background-image? How do you make a parallelogram with background-image? This script and codes were developed by Olivier C on 19 November 2022, Saturday.

Parallelogram with background-image Previews
IQ Test

Parallelogram with background-image - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Parallelogram with background-image</title> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="parallelogram"></div> <script src="js/index.js"></script>
</body>
</html>

Parallelogram with background-image - Script Codes CSS Codes

.parallelogram { overflow: hidden; width: 30rem; height: 10rem; background-color: #000; -webkit-transform: skew(-20deg) rotate(-20deg); transform: skew(-20deg) rotate(-20deg);
}
.parallelogram::after { content: ''; display: block; width: 110%; height: 200%; background-image: url("https://c1.staticflickr.com/9/8505/8378769627_7a8d4f7a2b_b.jpg"); background-size: cover; -webkit-transform: rotate(20deg) skew(20deg) translateX(-5%) translateY(-21%); transform: rotate(20deg) skew(20deg) translateX(-5%) translateY(-21%);
}
html,
body { height: 100%;
}
body { margin: 0; background-color: #333; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center;
}

Parallelogram with background-image - Script Codes JS Codes

// Css only...
Parallelogram with background-image - Script Codes
Parallelogram with background-image - Script Codes
Home Page Home
Developer Olivier C
Username olivier-c
Uploaded November 19, 2022
Rating 3
Size 2,401 Kb
Views 70,840
Do you need developer help for Parallelogram with background-image?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Olivier C (olivier-c) Script Codes
Name
Signature
Responsive Masonry in CSS only
Number Lists
Vertical Organizational Chart
Space Invaders
Arrow Scroll Top
A Pen by Olivier C
TagSphere
Mosaic
Graphs
Create amazing love letters with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!