Tiles - Triangles
How do I make an tiles - triangles?
What is a tiles - triangles? How do you make a tiles - triangles? This script and codes were developed by Alexandre Masy on 01 October 2022, Saturday.
Tiles - Triangles - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Tiles - Triangles</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="triangles"> <div class="triangle bottom-right"></div> <div class="triangle bottom-left"></div> <div class="triangle top-right"></div> <div class="triangle top-left"></div>
</div>
</body>
</html>
Tiles - Triangles - Script Codes CSS Codes
html, body { font-size: 18px;
}
* { box-sizing: border-box;
}
.triangles { width: 202px; height: 204px; margin: 30px auto; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between;
}
.triangle { position: relative; width: 100px; height: 100px; overflow: hidden;
}
.triangle:after { position: absolute; content: ""; width: 141.42136px; height: 141.42136px;
}
.bottom-right:after { top: 100%; left: 0%; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-transform-origin: 0 0; transform-origin: 0 0;
}
.bottom-left:after { top: 0%; left: 0%; -webkit-transform: rotate(45deg); transform: rotate(45deg); -webkit-transform-origin: 0 0; transform-origin: 0 0;
}
.top-right:after { top: -100%; left: 100%; -webkit-transform: rotate(45deg); transform: rotate(45deg); -webkit-transform-origin: 0 0; transform-origin: 0 0;
}
.top-left:after { top: 0%; left: -100%; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-transform-origin: 0 0; transform-origin: 0 0;
}
.linear, .triangle:after { background: -webkit-linear-gradient(top, #57EDD4 0, #57EDD4 4px, rgba(255, 255, 255, 0) 4px, rgba(255, 255, 255, 0) 8px); background: linear-gradient(to bottom, #57EDD4 0, #57EDD4 4px, rgba(255, 255, 255, 0) 4px, rgba(255, 255, 255, 0) 8px); background-repeat: repeat-y; background-size: 100% 8px;
}
Developer | Alexandre Masy |
Username | alexandremasy |
Uploaded | October 01, 2022 |
Rating | 3 |
Size | 2,696 Kb |
Views | 14,168 |
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 |
Bullet Loader | 3,028 Kb |
Activate Button | 4,170 Kb |
Alexandremasy-logo | 2,821 Kb |
Yp-loader | 2,917 Kb |
Ideation-icon | 3,269 Kb |
AngularJS - UI Router - Example 1 | 4,753 Kb |
A Pen by Alexandre Masy | 2,161 Kb |
SVG - Color Matrix applied to map | 2,264 Kb |
A Type Scale | 2,386 Kb |
Pair Game | 5,662 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 |
After America | Jonathangarner | 2,686 Kb |
CSS Letter animations | Sladix | 2,116 Kb |
Ionic Infinite outside ion-content with ion-pane | Felquis | 3,117 Kb |
Project MMetro beta | Atomicsong | 5,157 Kb |
Experiments with Vertical Centering | KatieK2 | 3,924 Kb |
Ionic - Wordpress REST API starter | Superpikar | 2,961 Kb |
Pure CSS Tooltip | APinix | 2,815 Kb |
AngularJS Animated Todo List | Ehaase | 2,975 Kb |
Css or Czz.. | Judag | 4,111 Kb |
Learning FlexBox | Alex_rodrigues | 2,821 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!