Css Skew background for triangular overlay
How do I make an css skew background for triangular overlay?
Overlaying a triangular shaped div for an interesting contact section.Needed to use a lot of css calc() to get it to work properly.. What is a css skew background for triangular overlay? How do you make a css skew background for triangular overlay? This script and codes were developed by Matt Edwards on 12 August 2022, Friday.
Css Skew background for triangular overlay - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Css Skew background for triangular overlay</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="contact-inner"> <div id="map"></div> <div class="contact-bg"></div> <div class="contact-info"> <h5>Company</h5> <p> 100 That Street<br> North Sydney, NSW 2060<br> Australia<br> </p> <p> +61 2 9999 9999<br> <a href="mailto:[email protected]">[email protected]</a> </p> <p> <small> ©2016 Me<br> <a href="/privacy" class="privacy">Privacy</a> </small> </p> </div>
</div>
</body>
</html>
Css Skew background for triangular overlay - Script Codes CSS Codes
.contact-inner { position: relative;
}
.contact-inner #map { height: 420px; background: url("http://mtedwards.s3.amazonaws.com/map.png"); background-size: contain;
}
.contact-inner .contact-info { position: absolute; padding-top: 2em; color: white; top: 0; left: 0; padding-left: 0.9375rem; padding-right: 0.9375rem; padding-top: 3em;
}
.contact-inner .contact-info a { color: white;
}
.contact-inner .contact-info a:hover { text-decoration: underline;
}
.contact-inner .contact-info a.privacy { text-decoration: underline;
}
.contact-inner .contact-info a.privacy:hover { text-decoration: none;
}
.contact-inner .contact-info p { line-height: 1.2;
}
.contact-inner .contact-info .social-icons a { margin-right: 0.5em;
}
.contact-inner .contact-info .social-icons a:hover { color: pink; text-decoration: none;
}
@media screen and (min-width: 1200px) { .contact-inner .contact-info { left: calc((100% - 1200px) / 2); }
}
.contact-inner .contact-bg { position: absolute; top: 0; bottom: 0; left: -400px; width: 600px; background: skyblue; -webkit-transform: skewX(-45deg); transform: skewX(-45deg);
}
@media screen and (min-width: 1200px) { .contact-inner .contact-bg { left: calc(-1000px + 220px + ((100% - 1200px) / 2)); width: 1000px; }
}
Developer | Matt Edwards |
Username | mtedwards |
Uploaded | August 12, 2022 |
Rating | 3 |
Size | 2,636 Kb |
Views | 105,248 |
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!
Name | Size |
A Pen by Matt Edwards | 1,700 Kb |
JQuery Star flashing effect | 2,487 Kb |
A Quiz, reveal answers and keep score | 3,189 Kb |
Responsive layout with Fixed width Sidebar | 2,249 Kb |
JQuery Slider | 3,002 Kb |
JQuery .show .hide menu | 2,356 Kb |
JQuery featured gallery | 7,630 Kb |
Calendar | 3,834 Kb |
Angular Form JSON test | 2,504 Kb |
Basic jQuery Tabs | 2,555 Kb |
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!
Name | Username | Size |
Twitch JSON API | Jvhti | 2,808 Kb |
CardMove | Thompsonemerson | 3,699 Kb |
AngularJS Animated Todo List | Ehaase | 2,975 Kb |
TheCalendar.js | The-teacher | 6,330 Kb |
Flat UI - Checkbox FIX | ARS | 2,663 Kb |
Video mute | Leon9208 | 2,131 Kb |
Playing with transition timing | Mattgrosswork | 1,993 Kb |
Fading Navigation Bar | J-w-v | 2,805 Kb |
Zip Button test | Lje7462 | 1,932 Kb |
Brent Burns Tribute Page | Nevada48 | 2,569 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!