CSS3 Shapes reference
How do I make an css3 shapes reference?
Geometric shapes and in css. What is a css3 shapes reference? How do you make a css3 shapes reference? This script and codes were developed by Tom Hermans on 09 December 2022, Friday.
CSS3 Shapes reference - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS3 Shapes reference</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h1>Some css shapes for future reference</h1>
<div id="circle"></div>
<div id="square"></div>
<div id="oval"></div>
<div id="triangle-down"></div>
<div id="triangle-down2"></div>
<div id="triangle-left"></div>
<div id="triangle-right"></div>
<div id="triangle-top"></div>
<div id="trapezium"></div>
<div id="halfrounded-rectangle"></div>
<div id="quartercircle"></div>
<hr />
<!--<div id="halfrounded-rectangle-bordered"></div>-->
<hr />
More to be found here:
<a href="http://pixeltuner.de/css3-formen/#css3-shapes">http://pixeltuner.de/css3-formen/#css3-shapes</a>
</body>
</html>
CSS3 Shapes reference - Script Codes CSS Codes
body { font-family: sans-serif;
}
div { display: inline-block;
}
#circle { display: inline-block; width: 140px; height: 140px; background: #bada55; -moz-border-radius: 70px; -webkit-border-radius: 70px; border-radius: 70px;
}
#square { display: inline-block; width: 140px; height: 140px; background: #bada55;
}
#oval { display: inline-block; width: 280px; height: 140px; background: #bada55; -moz-border-radius: 140px / 70px; -webkit-border-radius: 140px / 70px; border-radius: 140px / 70px;
}
#triangle-down { display: inline-block; width: 0; height: 0; border-top: 140px solid #bada55; border-left: 70px solid transparent; border-right: 70px solid transparent;
}
#triangle-down2 { display: inline-block; width: 0; height: 0; border-top: 140px solid #bada55; border-left: 140px solid transparent; border-right: 140px solid transparent;
}
#triangle-left { display: inline-block; width: 0; height: 0; border-top: 70px solid transparent; border-bottom: 70px solid transparent; border-right: 140px solid #bada55;
}
#triangle-right { display: inline-block; width: 0; height: 0; border-top: 70px solid transparent; border-bottom: 70px solid transparent; border-left: 140px solid #bada55;
}
#triangle-top { display: inline-block; width: 0; height: 0; border-left: 70px solid transparent; border-right: 70px solid transparent; border-bottom: 140px solid #bada55;
}
#trapezium { display: inline-block; height: 0; width: 70px; border-bottom: 70px solid #bada55; border-left: 35px solid transparent; border-right: 35px solid transparent;
}
#halfrounded-rectangle { background: #bada55; width: 140px; height: 93.33333px; border-radius: 0 46.66667px 46.66667px 0;
}
#halfrounded-rectangle-bordered { background: #bada55; width: 140px; height: 93.33333px; border-radius: 0 46.66667px 46.66667px 0; position: relative;
}
#halfrounded-rectangle-bordered:before { background: #fff; content: ""; width: 126px; height: 84px; top: 10px; left: 10px; border-radius: 0 46.66667px 46.66667px 0;
}
#quartercircle { background: #bada55; width: 140px; height: 140px; position: relative; border-radius: 0 0 0 140px;
}
Developer | Tom Hermans |
Username | tomhermans |
Uploaded | December 09, 2022 |
Rating | 3 |
Size | 2,574 Kb |
Views | 8,096 |
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!
Name | Size |
Tryout | 2,820 Kb |
Text in circle | 2,027 Kb |
Snappy snippet try | 4,189 Kb |
CSS Kwicks | 2,202 Kb |
Simple circle cutout css | 1,577 Kb |
CKEditor angular test | 15,138 Kb |
Portfolio box | 7,186 Kb |
Styled selectbox | 1,901 Kb |
CSS Solar system animation | 2,390 Kb |
Responsive Form | 2,161 Kb |
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!
Name | Username | Size |
Fading gradient button | Insprd | 1,713 Kb |
Main page display | BarryKe | 4,562 Kb |
Animated bar chart | CreativePunch | 3,124 Kb |
Scrolling Horizontal Isotope | Bramus | 2,017 Kb |
CSS3 Latte Art Logo | Esambino | 2,036 Kb |
Codero Sitemap | S1m0ne | 28,169 Kb |
Simple checkbox style | Vncnz | 2,628 Kb |
CSS3 keyframe onload animation. | Samueljseay | 1,706 Kb |
A Pen by Markku Lehmonen | SharpDal | 7,804 Kb |
Price table | Serluk | 5,928 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!