Pure CSS Ruby Illustration

Developer
Michael Lee
Size
2,673 Kb
Views
6,072
  1. Pure CSS Ruby Illustration Previews
  2. Pure CSS Ruby Illustration HTML Codes
  3. Pure CSS Ruby Illustration CSS Codes
  4. Pure CSS Ruby Illustration JS Codes

How do I make an pure css ruby illustration?

Pure Ruby illustration in CSS. Inspired by Ilja Miskov on Dribbble -http://drbl.in/itMoWas able to accomplish with only 3 tags.. What is a pure css ruby illustration? How do you make a pure css ruby illustration? This script and codes were developed by Michael Lee on 20 January 2023, Friday.

Pure CSS Ruby Illustration Previews
IQ Test

Pure CSS Ruby Illustration - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Pure CSS Ruby Illustration</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <section class="ruby"> <div class="top"></div> <div class="bottom"></div>
</section> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Pure CSS Ruby Illustration - Script Codes CSS Codes

body { background: #b2a3a3;
}
.ruby { width: 300px; margin: 0 auto; position: relative;
}
.ruby .top { border-bottom: 50px solid #d5244b; border-left: 50px solid transparent; border-right: 50px solid transparent; height: 0px; width: 40px; margin: 0 auto;
}
.ruby .top:before { content: ''; width: 90px; height: 50px; -webkit-transform: skew(-45deg); -moz-transform: skew(-45deg); -o-transform: skew(-45deg); background: #f04f5e; position: absolute; left: 16px;
}
.ruby .top:after { content: ''; width: 90px; height: 50px; -webkit-transform: skew(45deg); -moz-transform: skew(45deg); -o-transform: skew(45deg); background: #bb1948; position: absolute; left: 194px;
}
.ruby .bottom { width: 0; height: 0; margin: 0px auto; border-top: 140px solid #f0564b; border-left: 70px solid transparent; border-right: 70px solid transparent;
}
.ruby .bottom:before { content: ''; border-top: 140px solid #ee7d75; border-left: 78px solid transparent; border-right: 12px solid transparent; position: absolute; top: 50px; left: 32px; -webkit-transform: skew(30.2deg); -moz-transform: skew(30.2deg); -o-transform: skew(30.2deg);
}
.ruby .bottom:after { content: ''; border-top: 140px solid #d52f31; border-left: 78px solid transparent; border-right: 12px solid transparent; position: absolute; top: 50px; left: 145px; -webkit-transform: skew(-46.6deg); -moz-transform: skew(-46.6deg); -o-transform: skew(-46.6deg);
}

Pure CSS Ruby Illustration - Script Codes JS Codes

(function() {
}).call(this);
Pure CSS Ruby Illustration - Script Codes
Pure CSS Ruby Illustration - Script Codes
Home Page Home
Developer Michael Lee
Username michaellee
Uploaded January 20, 2023
Rating 3.5
Size 2,673 Kb
Views 6,072
Do you need developer help for Pure CSS Ruby Illustration?

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!

Michael Lee (michaellee) Script Codes
Name
Animated CSS Poly Drop
Rotating Button
SVG Hearts
Breathing Giphy Logo
Ringing bell
Hidden Social Media Share Buttons
A Pen by Michael Lee
X Mobile Menu
Axe the Hamburger, Hail the Tab Bar
SVG Triforce
Create amazing blog posts 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!