CSS triangles with border

Developer
Daniel Grant
Size
3,146 Kb
Views
8,096
  1. CSS triangles with border Previews
  2. CSS triangles with border HTML Codes
  3. CSS triangles with border CSS Codes

How do I make an css triangles with border?

A SASS mixin to generate CSS traingles with borders. Specify direction, border width, background color, border colour, triangle size.. What is a css triangles with border? How do you make a css triangles with border? This script and codes were developed by Daniel Grant on 28 December 2022, Wednesday.

CSS triangles with border Previews
IQ Test

CSS triangles with border - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS triangles with border</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! */ div { display: inline-block; margin-right: 20px;
}
.arrow-up { width: 200px; height: 100px; overflow: hidden;
}
.arrow-up:before, .arrow-up:after { content: ''; border-style: solid; position: absolute;
}
.arrow-up:before { border-width: 100px; border-color: transparent transparent #000 transparent; top: -100px;
}
.arrow-up:after { border-width: 99px; left: 2px; border-color: transparent transparent #fff transparent; top: -98px; left: 1px;
}
.arrow-down { width: 200px; height: 100px; overflow: hidden;
}
.arrow-down:before, .arrow-down:after { content: ''; border-style: solid; position: absolute;
}
.arrow-down:before { border-width: 100px; border-color: #000 transparent transparent transparent;
}
.arrow-down:after { border-width: 95px; left: 10px; border-color: pink transparent transparent transparent; left: 5px;
}
.arrow-right { width: 75px; height: 150px; overflow: hidden;
}
.arrow-right:before, .arrow-right:after { content: ''; border-style: solid; position: absolute;
}
.arrow-right:before { border-width: 75px; border-color: transparent transparent transparent #000;
}
.arrow-right:after { border-width: 73px; left: 4px; border-color: transparent transparent transparent green; top: 2px; left: 0;
}
.arrow-left { width: 75px; height: 150px; overflow: hidden;
}
.arrow-left:before, .arrow-left:after { content: ''; border-style: solid; position: absolute;
}
.arrow-left:before { border-width: 75px; border-color: transparent pink transparent transparent; left: -75px;
}
.arrow-left:after { border-width: 70px; left: 10px; border-color: transparent blue transparent transparent; top: 5px; left: -65px;
}
body { padding: 15px;
}
* { position: relative;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="arrow-up"></div>​
<div class="arrow-down"></div>​
<div class="arrow-left"></div>​
<div class="arrow-right"></div>​ <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

CSS triangles with border - Script Codes CSS Codes

div { display: inline-block; margin-right: 20px;
}
.arrow-up { width: 200px; height: 100px; overflow: hidden;
}
.arrow-up:before, .arrow-up:after { content: ''; border-style: solid; position: absolute;
}
.arrow-up:before { border-width: 100px; border-color: transparent transparent #000 transparent; top: -100px;
}
.arrow-up:after { border-width: 99px; left: 2px; border-color: transparent transparent #fff transparent; top: -98px; left: 1px;
}
.arrow-down { width: 200px; height: 100px; overflow: hidden;
}
.arrow-down:before, .arrow-down:after { content: ''; border-style: solid; position: absolute;
}
.arrow-down:before { border-width: 100px; border-color: #000 transparent transparent transparent;
}
.arrow-down:after { border-width: 95px; left: 10px; border-color: pink transparent transparent transparent; left: 5px;
}
.arrow-right { width: 75px; height: 150px; overflow: hidden;
}
.arrow-right:before, .arrow-right:after { content: ''; border-style: solid; position: absolute;
}
.arrow-right:before { border-width: 75px; border-color: transparent transparent transparent #000;
}
.arrow-right:after { border-width: 73px; left: 4px; border-color: transparent transparent transparent green; top: 2px; left: 0;
}
.arrow-left { width: 75px; height: 150px; overflow: hidden;
}
.arrow-left:before, .arrow-left:after { content: ''; border-style: solid; position: absolute;
}
.arrow-left:before { border-width: 75px; border-color: transparent pink transparent transparent; left: -75px;
}
.arrow-left:after { border-width: 70px; left: 10px; border-color: transparent blue transparent transparent; top: 5px; left: -65px;
}
body { padding: 15px;
}
* { position: relative;
}
CSS triangles with border - Script Codes
CSS triangles with border - Script Codes
Home Page Home
Developer Daniel Grant
Username djgrant
Uploaded December 28, 2022
Rating 3
Size 3,146 Kb
Views 8,096
Do you need developer help for CSS triangles with border?

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!

Daniel Grant (djgrant) Script Codes
Name
Number input with controls
Grid crosshairs
Zero element inline validation bubble
Auto expanding input addons
Gradient Border
Wireframe Planet
A Pen by Daniel Grant
Loading bar for ajax pages
Facebook Paper Theme
Responsive Modal
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!