Collection of hand-picked free HTML and CSS triangle code examples. Update of July 2019 collection. 4 new items.
Links
Made with
- HTML (Pug) / CSS
About a code
CSS 3D Triangle Spin
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -

Links
Made with
- HTML (Pug) / CSS (Stylus)
About a code
Bordered Image Triangle
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -

Links
Made with
- HTML (Haml) / CSS (SCSS)
About a code
Triangle Grid with nth-child
Creating a grid of triangles with CSS Grid and custom properties.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Made with
- HTML / CSS (SCSS)
About the code
Triangle
Animated triangle in pure CSS.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Made with
- HTML (Pug) / CSS (SCSS)
About the code
Rotating Rounded Triangles Animation
Rotating rounded triangles animation. Rounded triangles black and white. Pug. SCSS. Animation degrees.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -

Made with
- HTML / CSS
About the code
CSS Penrose Triangle
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Made with
- HTML (Pug) / CSS (SCSS)
About the code
Pure CSS Animated Triangle Grid
ure CSS animated triangle grid pop with grid
, variables
, clip-path
.
Compatible browsers: Chrome, Firefox, Opera, Safari
Responsive: yes
Dependencies: -

Made with
- HTML / CSS (SCSS)
About the code
Triangle Cutout
Triangle cutout with pseudo-elements.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -


Links
Made with
- HTML / CSS (SCSS)
About the code
CSS Triangles
CSS triangle / equilateral triangle: arrow with empty space, arrow without empty space, an equilateral triangle.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: -


Links
Made with
- HTML (Pug) / CSS (SCSS)
About the code
△
Only CSS triangle.
Compatible browsers: Chrome, Firefox, Opera, Safari
Dependencies: -

Links
Made with
- HTML (Pug) / CSS (SCSS)
About the code
Pink Triangles
CSS only pink animated triangles.
Compatible browsers: Chrome, Firefox, Opera, Safari
Dependencies: -

Links
Made with
- HTML (Haml) / CSS (Sass)
About the code
Triangle
3D triangle.
Compatible browsers: Chrome, Firefox, Opera, Safari
Dependencies: -

Links
Made with
- HTML / CSS (SCSS)
About the code
Double Triangle
Text cards with double triangles.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: -


Links
Made with
- HTML / CSS (SCSS)
About the code
Penrose Triangle
The Penrose Triangle, also known as the impossible tribar, created by the Swedish artist Oscar Reutersvärd. Created using HTML and SCSS only.
Compatible browsers: Chrome, Firefox, Opera, Safari
Dependencies: -


Links
Made with
- HTML / CSS (SCSS)
About the code
Triangles
A little CSS representation of the Compilerbau "North Wall" album cover, with a nifty little bonus hover state.
Compatible browsers: Chrome, Firefox, Opera, Safari
Dependencies: -
Links
Made with
- HTML / CSS
About a code
Triangle
SVG triangle with GIF background.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -

Links
Made with
- HTML / CSS / JavaScript
About the code
Penrose Triangle x3
Pure CSS penrose triangle x3.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: -

Links
Made with
- HTML / CSS
About the code
Penrose Triangle
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: -

Links
Made with
- HTML (Haml) / CSS (SCSS)
About the code
Quick Gradient Triangle Mixin
Threw a really quick mixin to make triangle gradients.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: -


Links
Made with
- HTML (Haml) / CSS (Sass)
About the code
Chromatic Triangle
Try to change the $rings
value and -30.times do
.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: -


Links
Made with
- HTML / CSS (SCSS)
About the code
Negative Triangle SASS Mixin
Create negative triangles with this SASS mixin that leverages the power of the pseudo elements.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: -


Links
Made with
- HTML (Slim) / CSS (Sass)
About the code
Centroid-Centred CSS Triangle
CSS rotations centre on bounding boxes, so triangles are not rotated on their centroid. Using the :after
pseudo-element for the triangle, the original element may be given a height and width to create bounding box centred around the triangle's centroid.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: -

Links
Made with
- HTML (Markdown) / CSS (SCSS)
About the code
Triangles
Logo with triangles.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: -