CSS Triangles in Sass

Developer
Dang Van Thanh
Size
2,295 Kb
Views
22,264
  1. CSS Triangles in Sass Previews
  2. CSS Triangles in Sass HTML Codes
  3. CSS Triangles in Sass CSS Codes

How do I make an css triangles in sass?

What is a css triangles in sass? How do you make a css triangles in sass? This script and codes were developed by Dang Van Thanh on 13 September 2022, Tuesday.

CSS Triangles in Sass Previews
IQ Test

CSS Triangles in Sass - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS Triangles in Sass</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="arrow"> <figure class="arrow-top"></figure> <figure class="arrow-right"></figure> <figure class="arrow-bottom"></figure> <figure class="arrow-left"></figure> <figure class="arrow-top-left"></figure> <figure class="arrow-top-right"></figure> <figure class="arrow-bottom-left"></figure> <figure class="arrow-bottom-right"></figure>
</div>
</body>
</html>

CSS Triangles in Sass - Script Codes CSS Codes

/* Mixin arrow */
/* Demo */
body { background-color: #2c3e50; height: 100%;
}
.arrow { text-align: center;
}
figure { display: inline-block !important;
}
.arrow-top { display: block; height: 0; width: 0; border-left: 40px solid transparent; border-right: 40px solid transparent; border-bottom: 40px solid #1abc9c;
}
.arrow-right { display: block; height: 0; width: 0; border-top: 40px solid transparent; border-bottom: 40px solid transparent; border-left: 40px solid #2ecc71;
}
.arrow-bottom { display: block; height: 0; width: 0; border-top: 40px solid #3498db; border-right: 40px solid transparent; border-left: 40px solid transparent;
}
.arrow-left { display: block; height: 0; width: 0; border-top: 40px solid transparent; border-right: 40px solid #9b59b6; border-bottom: 40px solid transparent;
}
.arrow-top-right { display: block; height: 0; width: 0; border-top: 40px solid #95a5a6; border-right: 40px solid transparent;
}
.arrow-top-left { display: block; height: 0; width: 0; border-top: 40px solid #f1c40f; border-left: 40px solid transparent;
}
.arrow-bottom-right { display: block; height: 0; width: 0; border-bottom: 40px solid #e67e22; border-right: 40px solid transparent;
}
.arrow-bottom-left { display: block; height: 0; width: 0; border-bottom: 40px solid #e74c3c; border-left: 40px solid transparent;
}
CSS Triangles in Sass - Script Codes
CSS Triangles in Sass - Script Codes
Home Page Home
Developer Dang Van Thanh
Username dangvanthanh
Uploaded September 13, 2022
Rating 3
Size 2,295 Kb
Views 22,264
Do you need developer help for CSS Triangles in Sass?

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!

Dang Van Thanh (dangvanthanh) Script Codes
Name
HTML5 Geolocation and Leaflet
Scale in CSS3 Transform
Long Shadow Mixin in Sass
Skew in CSS3 Transform
Long Shadow CSS3 in Sass
Pure CSS Off Canvas Icon
Media Queries Sass Mixin
Navigation Responsive with Transition
Modal Bootstrap with ReactJS
CSS Slide Up and Slide Down
Create amazing marketing copy 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!