Sassy Shape Machine Mixin

Developer
Una Kravets
Size
3,054 Kb
Views
38,456
  1. Sassy Shape Machine Mixin Previews
  2. Sassy Shape Machine Mixin HTML Codes
  3. Sassy Shape Machine Mixin CSS Codes

How do I make an sassy shape machine mixin?

A mixin for creating simple Sass shapes! Based on this CSS-Tricks post: http://css-tricks.com/examples/ShapesOfCSS/ and some additional research :) Enjoy!. What is a sassy shape machine mixin? How do you make a sassy shape machine mixin? This script and codes were developed by Una Kravets on 05 August 2022, Friday.

Sassy Shape Machine Mixin Previews
IQ Test

Sassy Shape Machine Mixin - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Sassy Shape Machine Mixin</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="hexagon"></div> <div class="square"></div> <div class="circle"></div> <div class="triangle"></div> <div class="right-triangle"></div> <div class="diamond"></div> <div class="pentagon"></div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

Sassy Shape Machine Mixin - Script Codes CSS Codes

/* Sass Shape Machine Mixin
Simple, sassy shapes ;)
based on: http://css-tricks.com/examples/ShapesOfCSS/ */
body { background-color: #3d3d3d;
}
div { float: left; margin: 50px;
}
.square { width: 50px; height: 50px; background-color: #967bd3;
}
.circle { width: 50px; height: 50px; background-color: #c8815b; border-radius: 50%;
}
.triangle { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 75px solid #8cd6d8;
}
.right-triangle { width: 0; height: 0; border-bottom: 50px solid #bee6b6; border-right: 50px solid transparent;
}
.diamond { width: 0; height: 0; border: 50px solid transparent; border-bottom-color: #dd9bb9; position: relative; top: -50px;
}
.diamond:after { content: ''; position: absolute; left: -50px; top: 50px; width: 0; height: 0; border: 50px solid transparent; border-top-color: #dd9bb9;
}
.pentagon { position: relative; width: 50px; border-width: 46.2963px 16.66667px 0; border-style: solid; border-color: #c4b5e6 transparent;
}
.pentagon:before { content: ""; position: absolute; height: 0; width: 0; top: -77.27273px; left: -16.66667px; border-width: 0 41.66667px 32.40741px; border-style: solid; border-color: transparent transparent #c4b5e6;
}
.hexagon { width: 100px; height: 55px; background: #cb6363; position: relative;
}
.hexagon:before { content: ""; position: absolute; top: -25px; left: 0; width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 25px solid #cb6363;
}
.hexagon:after { content: ""; position: absolute; bottom: -25px; left: 0; width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-top: 25px solid #cb6363;
}
Sassy Shape Machine Mixin - Script Codes
Sassy Shape Machine Mixin - Script Codes
Home Page Home
Developer Una Kravets
Username una
Uploaded August 05, 2022
Rating 4
Size 3,054 Kb
Views 38,456
Do you need developer help for Sassy Shape Machine Mixin?

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!

Una Kravets (una) Script Codes
Name
Infrared Mixin
Selective Coloring with CSS
Jeff the Bug in Flight Mode
The Power of CSS Talk
CSS Custom Properties on Elements
Infrared Mixin SVG test
3D Effect Part 2
Animated Menu
Vuenicorn
Shape-inside hack
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!