CSS Triangles and Arrows
How do I make an css triangles and arrows?
Create Triangles and Arrows using CSS, no images. Useful for items that have dropdowns, or bullets for list items.. What is a css triangles and arrows? How do you make a css triangles and arrows? This script and codes were developed by Ricardo Zea on 28 September 2022, Wednesday.
CSS Triangles and Arrows - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS Triangles and Arrows</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h1>CSS Arrows/Triangles Combinations</h1>
<ol> <li><div class="side1"></div></li> <li><div class="side2"></div></li> <li><div class="all4"></div></li> <li><div class="top-n-bottom"></div></li> <li><div class="left-n-right"></div></li> <li><div class="side1 vertical"></div></li> <li class="top-bottom-separated pos-ab-element"> <div class="north"></div> <div class="south"></div> </li> <li class="west-east-separated pos-ab-element"> <div class="west"></div> <div class="east"></div> </li>
</ol>
<ol> <li><div class="top-right"></div></li> <li><div class="bottom-right"></div></li> <li><div class="bottom-left"></div></li> <li><div class="top-left"></div></li>
</ol>
<ol class="extra"> <li><div class="north"></div></li> <li><div class="east"></div></li> <li><div class="south"></div></li> <li><div class="west"></div></li>
</ol>
<p>Similar demo in CodePen: <a href="https://codepen.io/ricardozea/pen/30a046dec7d990b1651931d0c1300f6b">CSS Shapes with Sass</a></p>
<hr>
<p>Created by <a href="http://ricardozea.me/">Ricardo Zea</a></p>
</body>
</html>
CSS Triangles and Arrows - Script Codes CSS Codes
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
html { height: 100%;
}
body { background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iODAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMzQzNjJlIi8+PHN0b3Agb2Zmc2V0PSI4MCUiIHN0b3AtY29sb3I9IiMyNzI4MjIiLz48L3JhZGlhbEdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA='); background: -moz-radial-gradient(#34362e, #272822 80%); background: -webkit-radial-gradient(#34362e, #272822 80%); background: radial-gradient(#34362e, #272822 80%); color: white; text-align: center; font-family: 'Trebuchet MS';
}
a, a:visited { color: #2963BD;
}
a:hover { color: #c90; text-decoration: none;
}
ol { display: flex; flex-wrap: wrap; padding: 10px 10px 10px 35px; margin: 50px; list-style-type: lower-alpha; border: #333 1px solid; background: rgba(39, 40, 34, 0.5); border-radius: 2px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}
ol li { margin-right: 70px;
}
ol li:last-of-type { margin: 0;
}
ol.extra { padding-top: 30px;
}
.clearfix:before, .clearfix:after { display: block; content: ""; height: 0; overflow: hidden;
}
.clearfix:after { clear: both;
}
div { margin-bottom: 20px;
}
div.side1 { height: 0; width: 0; border-top: 100px solid #c03; border-right: 100px solid #2963BD;
}
div.side1.vertical { transform: rotate(45deg); margin-top: 20px;
}
div.side2 { height: 0; width: 0; border-bottom: 100px solid #429032; border-right: 100px solid #c90;
}
div.all4 { border-style: solid; border-width: 50px; border-bottom-color: #2963BD; border-left-color: #429032; border-top-color: #c90; border-right-color: #c03; height: 0; width: 0;
}
div.top-n-bottom { border-style: solid; border-width: 50px; border-bottom-color: #2963BD; border-left-color: transparent; border-top-color: #c90; border-right-color: transparent; height: 0; width: 0;
}
div.left-n-right { border-style: solid; border-width: 50px; border-bottom-color: transparent; border-left-color: #429032; border-top-color: transparent; border-right-color: #c03; height: 0; width: 0;
}
div.top-right { height: 0; width: 0; border-top: 100px solid #429032; border-left: 100px solid transparent;
}
div.bottom-right { height: 0; width: 0; border-bottom: 100px solid #c03; border-left: 100px solid transparent;
}
div.bottom-left { height: 0; width: 0; border-bottom: 100px solid #2963BD; border-right: 100px solid transparent;
}
div.top-left { height: 0; width: 0; border-top: 100px solid #c90; border-right: 100px solid transparent;
}
div.north { height: 0; width: 0; border-top: 100px solid #429032; border-left: 100px solid transparent; transform: rotate(-45deg);
}
div.east { height: 0; width: 0; border-bottom: 100px solid #c03; border-left: 100px solid transparent; transform: rotate(-45deg); margin-left: -50px;
}
div.south { height: 0; width: 0; border-bottom: 100px solid #2963BD; border-right: 100px solid transparent; transform: rotate(-45deg); margin-top: -20px;
}
div.west { height: 0; width: 0; border-top: 100px solid #c90; border-right: 100px solid transparent; transform: rotate(-45deg);
}
.top-bottom-separated { position: relative; margin-right: 170px;
}
.top-bottom-separated div { position: absolute; margin: 0;
}
.top-bottom-separated .south { border-bottom: 100px solid #c90; top: 40px;
}
.top-bottom-separated .north { margin-top: 10px;
}
.west-east-separated { position: relative;
}
.west-east-separated div { position: absolute; margin: 0;
}
.west-east-separated .east { border-bottom: 100px solid #c03; top: 28px; left: 10px;
}
.west-east-separated .west { margin-top: 10px;
}
/*Not needed for demo*/
hr { width: 90%; margin: 30px auto; border: none; border-top: #666 1px dotted;
}
.pos-ab-element { width: 23px; height: 165px;
}
![CSS Triangles and Arrows - Script Codes](http://shots.codepen.io/ricardozea/pen/feiLs-512.jpg)
Developer | Ricardo Zea |
Username | ricardozea |
Uploaded | September 28, 2022 |
Rating | 3.5 |
Size | 4,360 Kb |
Views | 20,240 |
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 |
Sass mixin for Inside Borders | 17,268 Kb |
Simple aqua button with CSS | 5,106 Kb |
Line-On-Sides Headers | 2,259 Kb |
Responsive Table CSS | 7,571 Kb |
CSS Shapes with Sass | 5,726 Kb |
Simple Sass Mixin for Width and Height | 4,523 Kb |
Sass Mixin for Links | 3,743 Kb |
CSS Blinking Text Cursor | 3,294 Kb |
03 - Custom CSS Grid - Floats | 5,018 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 |
Portfolio Layout Flex | Lahvjal | 3,489 Kb |
Lecture 1 | Law | 0 Kb |
Awesome textarea | Ayoungh | 1,977 Kb |
Tooltip in table | Roine | 3,713 Kb |
Flat UI Button | Honchoman | 2,289 Kb |
Experiments with Vertical Centering | KatieK2 | 3,924 Kb |
Banner Ad | Raquellorenzana | 4,172 Kb |
CSS Patterns | Alyda | 3,953 Kb |
SVG Circle Progress | JMChristensen | 3,368 Kb |
Animated Vertical CSS3 Menu Black | MaCeLMp4 | 2,750 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!