Triangular Pattern Background
How do I make an triangular pattern background?
After the success of the Cubical Pattern Background pen, I decided to finish off the experiment with the 2nd example from the inspired article. -http://veerle.duoh.com/design/article/creating_geometric_patterns_in_illustrator - create again with SCSS and Bourbon. . What is a triangular pattern background? How do you make a triangular pattern background? This script and codes were developed by Nick Hehr on 15 August 2022, Monday.
Triangular Pattern Background - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Triangular Pattern Background</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ * { list-style: none; font-family: "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif; text-decoration: none; padding: 0; margin: 0;
}
header { white-space: nowrap; width: 100%; height: 400px; overflow: hidden; opacity: 0.8; border-bottom: 15px solid #222222;
}
section { text-align: center;
}
section a { color: #5a5a5a;
}
section a:hover { text-decoration: underline;
}
h1 { z-index: 13; position: absolute; display: inline-block; top: 250px; left: 10%; margin: 0; font-family: "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif; font-size: 1.75em; font-weight: 100; color: white; background: #222222; padding: 20px;
}
section h1 { position: static; background: none; color: #5a5a5a;
}
.bg { position: relative; bottom: 100px; right: 50px;
}
.row { margin-bottom: 112px;
}
.pattern { position: relative; display: inline-block; margin-left: -4px;
}
.pattern div { display: inline-block;
}
.pattern #mid { height: 0px; width: 0px; border-top: 58px solid #E0FB80; border-left: 100px solid transparent; border-right: 100px solid transparent;
}
.pattern #mid::before { content: ""; height: 0px; width: 0px; border-top: 58px solid #addb07; border-left: 100px solid transparent; border-right: 100px solid transparent; position: absolute; top: 0px; right: 0; bottom: 0; left: 0px; -webkit-transform: rotate(-120deg); -moz-transform: rotate(-120deg); -ms-transform: rotate(-120deg); -o-transform: rotate(-120deg); transform: rotate(-120deg); -webkit-transform-origin: center bottom; -moz-transform-origin: center bottom; -ms-transform-origin: center bottom; -o-transform-origin: center bottom; transform-origin: center bottom;
}
.pattern #mid::after { content: ""; height: 0px; width: 0px; border-top: 58px solid #cef936; border-left: 100px solid transparent; border-right: 100px solid transparent; position: absolute; top: 0px; right: 0; bottom: 0; left: 0px; -webkit-transform: rotate(120deg); -moz-transform: rotate(120deg); -ms-transform: rotate(120deg); -o-transform: rotate(120deg); transform: rotate(120deg); -webkit-transform-origin: center bottom; -moz-transform-origin: center bottom; -ms-transform-origin: center bottom; -o-transform-origin: center bottom; transform-origin: center bottom;
}
.pattern #left { height: 0px; width: 0px; border-right: 58px solid #9CDFF5; border-top: 100px solid transparent; border-bottom: 100px solid transparent; position: absolute; top: 1px; right: 0; bottom: 0; left: -4px; -webkit-transform: rotate(-30deg); -moz-transform: rotate(-30deg); -ms-transform: rotate(-30deg); -o-transform: rotate(-30deg); transform: rotate(-30deg);
}
.pattern #left::after { content: ""; height: 0px; width: 0px; border-bottom: 58px solid #17afe1; border-right: 100px solid transparent; position: absolute; top: 21px; right: 0; bottom: 0; left: -21px; -webkit-transform: rotate(30deg); -moz-transform: rotate(30deg); -ms-transform: rotate(30deg); -o-transform: rotate(30deg); transform: rotate(30deg);
}
.pattern #right { height: 0px; width: 0px; border-left: 58px solid #6ed0f0; border-top: 100px solid transparent; border-bottom: 100px solid transparent; position: absolute; top: 1px; right: -4px; bottom: 0; left: auto; -webkit-transform: rotate(30deg); -moz-transform: rotate(30deg); -ms-transform: rotate(30deg); -o-transform: rotate(30deg); transform: rotate(30deg);
}
.pattern #right::after { content: ""; height: 0px; width: 0px; border-bottom: 58px solid #17afe1; border-left: 100px solid transparent; position: absolute; top: 21px; right: -21px; bottom: 0; left: auto; -webkit-transform: rotate(-30deg); -moz-transform: rotate(-30deg); -ms-transform: rotate(-30deg); -o-transform: rotate(-30deg); transform: rotate(-30deg);
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <header> <h1>Yet Another Beautiful Background!</h1> <div class="bg"> <ul class="row"> <li class="pattern"> <div id="left"></div> <div id="mid"></div> <div id="right"></div> </li> <li class="pattern"> <div id="left"></div> <div id="mid"></div> <div id="right"></div> </li> <li class="pattern"> <div id="left"></div> <div id="mid"></div> <div id="right"></div> </li> <li class="pattern"> <div id="left"></div> <div id="mid"></div> <div id="right"></div> </li> <li class="pattern"> <div id="left"></div> <div id="mid"></div> <div id="right"></div> </li> <li class="pattern"> <div id="left"></div> <div id="mid"></div> <div id="right"></div> </li> <li class="pattern"> <div id="left"></div> <div id="mid"></div> <div id="right"></div> </li> <li class="pattern"> <div id="left"></div> <div id="mid"></div> <div id="right"></div> </li> <li class="pattern"> <div id="left"></div> <div id="mid"></div> <div id="right"></div> </li> <li class="pattern"> <div id="left"></div> <div id="mid"></div> <div id="right"></div> </li> <li class="pattern"> <div id="left"></div> <div id="mid"></div> <div id="right"></div> </li> <li class="pattern"> <div id="left"></div> <div id="mid"></div> <div id="right"></div> </li> <li class="pattern"> <div id="left"></div> <div id="mid"></div> <div id="right"></div> </li> <li class="pattern"> <div id="left"></div> <div id="mid"></div> <div id="right"></div> </li> <li class="pattern"> <div id="left"></div> <div id="mid"></div> <div id="right"></div> </li> </ul> <ul class="row"> <li class="pattern"> <div id="left"></div> <div id="mid"></div> <div id="right"></div> </li> <li class="pattern"> <div id="left"></div> <div id="mid"></div> <div id="right"></div> </li> <li class="pattern"> <div id="left"></div> <div id="mid"></div> <div id="right"></div> </li> <li class="pattern"> <div id="left"></div> <div id="mid"></div> <div id="right"></div> </li> <li class="pattern"> <div id="left"></div> <div id="mid"></div> <div id="right"></div> </li> <li class="pattern"> <div id="left"></div> <div id="mid"></div> <div id="right"></div> </li> <li class="pattern"> <div id="left"></div> <div id="mid"></div> <div id="right"></div> </li> <li class="pattern"> <div id="left"></div> <div id="mid"></div> <div id="right"></div> </li> <li class="pattern"> <div id="left"></div> <div id="mid"></div> <div id="right"></div> </li> <li class="pattern"> <div id="left"></div> <div id="mid"></div> <div id="right"></div> </li> <li class="pattern"> <div id="left"></div> <div id="mid"></div> <div id="right"></div> </li> <li class="pattern"> <div id="left"></div> <div id="mid"></div> <div id="right"></div> </li> <li class="pattern"> <div id="left"></div> <div id="mid"></div> <div id="right"></div> </li> <li class="pattern"> <div id="left"></div> <div id="mid"></div> <div id="right"></div> </li> <li class="pattern"> <div id="left"></div> <div id="mid"></div> <div id="right"></div> </li> </ul> <ul class="row"> <li class="pattern"> <div id="left"></div> <div id="mid"></div> <div id="right"></div> </li> <li class="pattern"> <div id="left"></div> <div id="mid"></div> <div id="right"></div> </li> <li class="pattern"> <div id="left"></div> <div id="mid"></div> <div id="right"></div> </li> <li class="pattern"> <div id="left"></div> <div id="mid"></div> <div id="right"></div> </li> <li class="pattern"> <div id="left"></div> <div id="mid"></div> <div id="right"></div> </li> <li class="pattern"> <div id="left"></div> <div id="mid"></div> <div id="right"></div> </li> <li class="pattern"> <div id="left"></div> <div id="mid"></div> <div id="right"></div> </li> <li class="pattern"> <div id="left"></div> <div id="mid"></div> <div id="right"></div> </li> <li class="pattern"> <div id="left"></div> <div id="mid"></div> <div id="right"></div> </li> <li class="pattern"> <div id="left"></div> <div id="mid"></div> <div id="right"></div> </li> <li class="pattern"> <div id="left"></div> <div id="mid"></div> <div id="right"></div> </li> <li class="pattern"> <div id="left"></div> <div id="mid"></div> <div id="right"></div> </li> <li class="pattern"> <div id="left"></div> <div id="mid"></div> <div id="right"></div> </li> <li class="pattern"> <div id="left"></div> <div id="mid"></div> <div id="right"></div> </li> <li class="pattern"> <div id="left"></div> <div id="mid"></div> <div id="right"></div> </li> </ul> <ul class="row"> <li class="pattern"> <div id="left"></div> <div id="mid"></div> <div id="right"></div> </li> <li class="pattern"> <div id="left"></div> <div id="mid"></div> <div id="right"></div> </li> <li class="pattern"> <div id="left"></div> <div id="mid"></div> <div id="right"></div> </li> <li class="pattern"> <div id="left"></div> <div id="mid"></div> <div id="right"></div> </li> <li class="pattern"> <div id="left"></div> <div id="mid"></div> <div id="right"></div> </li> <li class="pattern"> <div id="left"></div> <div id="mid"></div> <div id="right"></div> </li> <li class="pattern"> <div id="left"></div> <div id="mid"></div> <div id="right"></div> </li> <li class="pattern"> <div id="left"></div> <div id="mid"></div> <div id="right"></div> </li> <li class="pattern"> <div id="left"></div> <div id="mid"></div> <div id="right"></div> </li> <li class="pattern"> <div id="left"></div> <div id="mid"></div> <div id="right"></div> </li> <li class="pattern"> <div id="left"></div> <div id="mid"></div> <div id="right"></div> </li> <li class="pattern"> <div id="left"></div> <div id="mid"></div> <div id="right"></div> </li> <li class="pattern"> <div id="left"></div> <div id="mid"></div> <div id="right"></div> </li> <li class="pattern"> <div id="left"></div> <div id="mid"></div> <div id="right"></div> </li> <li class="pattern"> <div id="left"></div> <div id="mid"></div> <div id="right"></div> </li> </ul> </div>
</header>
<section> <h1>Another Quick Pen By HipsterBrown</h1> <p>Inspired by <a target="_blank" href="http://veerle.duoh.com/design/article/creating_geometric_patterns_in_illustrator"> Veerle Pieters</a></p>
</section>
</body>
</html>
Triangular Pattern Background - Script Codes CSS Codes
* { list-style: none; font-family: "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif; text-decoration: none; padding: 0; margin: 0;
}
header { white-space: nowrap; width: 100%; height: 400px; overflow: hidden; opacity: 0.8; border-bottom: 15px solid #222222;
}
section { text-align: center;
}
section a { color: #5a5a5a;
}
section a:hover { text-decoration: underline;
}
h1 { z-index: 13; position: absolute; display: inline-block; top: 250px; left: 10%; margin: 0; font-family: "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif; font-size: 1.75em; font-weight: 100; color: white; background: #222222; padding: 20px;
}
section h1 { position: static; background: none; color: #5a5a5a;
}
.bg { position: relative; bottom: 100px; right: 50px;
}
.row { margin-bottom: 112px;
}
.pattern { position: relative; display: inline-block; margin-left: -4px;
}
.pattern div { display: inline-block;
}
.pattern #mid { height: 0px; width: 0px; border-top: 58px solid #E0FB80; border-left: 100px solid transparent; border-right: 100px solid transparent;
}
.pattern #mid::before { content: ""; height: 0px; width: 0px; border-top: 58px solid #addb07; border-left: 100px solid transparent; border-right: 100px solid transparent; position: absolute; top: 0px; right: 0; bottom: 0; left: 0px; -webkit-transform: rotate(-120deg); -moz-transform: rotate(-120deg); -ms-transform: rotate(-120deg); -o-transform: rotate(-120deg); transform: rotate(-120deg); -webkit-transform-origin: center bottom; -moz-transform-origin: center bottom; -ms-transform-origin: center bottom; -o-transform-origin: center bottom; transform-origin: center bottom;
}
.pattern #mid::after { content: ""; height: 0px; width: 0px; border-top: 58px solid #cef936; border-left: 100px solid transparent; border-right: 100px solid transparent; position: absolute; top: 0px; right: 0; bottom: 0; left: 0px; -webkit-transform: rotate(120deg); -moz-transform: rotate(120deg); -ms-transform: rotate(120deg); -o-transform: rotate(120deg); transform: rotate(120deg); -webkit-transform-origin: center bottom; -moz-transform-origin: center bottom; -ms-transform-origin: center bottom; -o-transform-origin: center bottom; transform-origin: center bottom;
}
.pattern #left { height: 0px; width: 0px; border-right: 58px solid #9CDFF5; border-top: 100px solid transparent; border-bottom: 100px solid transparent; position: absolute; top: 1px; right: 0; bottom: 0; left: -4px; -webkit-transform: rotate(-30deg); -moz-transform: rotate(-30deg); -ms-transform: rotate(-30deg); -o-transform: rotate(-30deg); transform: rotate(-30deg);
}
.pattern #left::after { content: ""; height: 0px; width: 0px; border-bottom: 58px solid #17afe1; border-right: 100px solid transparent; position: absolute; top: 21px; right: 0; bottom: 0; left: -21px; -webkit-transform: rotate(30deg); -moz-transform: rotate(30deg); -ms-transform: rotate(30deg); -o-transform: rotate(30deg); transform: rotate(30deg);
}
.pattern #right { height: 0px; width: 0px; border-left: 58px solid #6ed0f0; border-top: 100px solid transparent; border-bottom: 100px solid transparent; position: absolute; top: 1px; right: -4px; bottom: 0; left: auto; -webkit-transform: rotate(30deg); -moz-transform: rotate(30deg); -ms-transform: rotate(30deg); -o-transform: rotate(30deg); transform: rotate(30deg);
}
.pattern #right::after { content: ""; height: 0px; width: 0px; border-bottom: 58px solid #17afe1; border-left: 100px solid transparent; position: absolute; top: 21px; right: -21px; bottom: 0; left: auto; -webkit-transform: rotate(-30deg); -moz-transform: rotate(-30deg); -ms-transform: rotate(-30deg); -o-transform: rotate(-30deg); transform: rotate(-30deg);
}
Developer | Nick Hehr |
Username | HipsterBrown |
Uploaded | August 15, 2022 |
Rating | 3.5 |
Size | 4,393 Kb |
Views | 26,312 |
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 |
Responsive Icons in CSS | 6,961 Kb |
CSS Icons | 3,516 Kb |
SVG Heart Animations with React | 5,579 Kb |
ATOM Icon in CSS and Animated | 6,216 Kb |
Sorting Table - JS | 4,809 Kb |
Animated React Home Feed | 7,040 Kb |
Sassy CodePen Icon | 4,401 Kb |
Playing with React-Motion | 3,751 Kb |
Welcome to Mavericks | 6,548 Kb |
Fixed in Fixed | 2,254 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 |
NAV WPMANAGER | Mstoic | 1,991 Kb |
Word Wrap Algorithm for Multiline Canvas Text | Peterhry | 2,349 Kb |
Kut D3 | Jellevrswk | 3,687 Kb |
How to add Css Fold Notes In Blogger By Askwithloud.com | Askwithloud | 2,280 Kb |
SVG hamburger menu button | Elifitch | 2,602 Kb |
Fullscreen audio play button | 72 | 2,148 Kb |
A Pen by Shidhin | Shidhincr | 5,015 Kb |
P1 | Vivi_Lai | 1,533 Kb |
Flexbox Test | Icutpeople | 2,486 Kb |
Pure CSS read more toggle | Idered | 2,344 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!