Css3 shapes
How do I make an css3 shapes?
CSS3 base shapes, like square, rectangle, circle, triangle, star, Pentagon, Hexagon, Octagon, etc.... What is a css3 shapes? How do you make a css3 shapes? This script and codes were developed by Krishna Babu on 11 January 2023, Wednesday.
Css3 shapes Previews
Css3 shapes - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Css3 shapes</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <header> <h1>CSS3 Based shape</h1>
</header>
<div id="square"></div>
</br>
<div id="rectangle"></div>
</br>
<div id="circle"></div>
</br>
<div id="oval"></div>
</br>
<div id="triangle-up"></div>
</br>
<div id="triangle-down"></div>
</br>
<div id="triangle-left"></div>
</br>
<div id="triangle-right"></div>
</br>
<div id="triangle-topleft"></div>
</br>
<div id="triangle-topright"></div>
</br>
<div id="triangle-bottomleft"></div>
</br>
<div id="triangle-bottomright"></div>
</br>
<div id="trapezoid"></div>
</br>
<div id="parallelogram"></div>
</br>
<div id="star-six"></div>
</br>
<div id="star-five"></div>
</br></br>
<div id="pentagon"></div>
</br></br>
<div id="hexagon"></div>
</br></br>
<div id="octagon"></div>
</body>
</html>
Css3 shapes - Script Codes CSS Codes
@import url(https://fonts.googleapis.com/css?family=Raleway:900);
body{ margin:0; padding: 0; font-family: 'Raleway', sans-serif; color: #333;
}
header h1{ text-align: center; font-weight: bold; border-bottom: 1px solid; line-height: 60px;
} div{float:left; margin-left:50px; margin-bottom:50px;}
#square { width: 100px; height: 100px; background: #0d96b6; }
#rectangle { width: 200px; height: 100px; background: #0d96b6; }
#circle { width: 100px; height: 100px; background: #0d96b6; -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px; }
#oval { width: 200px; height: 100px; background: #0d96b6; -moz-border-radius: 100px / 50px; -webkit-border-radius: 100px / 50px; border-radius: 100px / 50px; }
#triangle-up { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid #0d96b6; }
#triangle-down { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-top: 100px solid #0d96b6; }
#triangle-left { width: 0; height: 0; border-top: 50px solid transparent; border-right: 100px solid #0d96b6; border-bottom: 50px solid transparent; }
#triangle-right { width: 0; height: 0; border-top: 50px solid transparent; border-left: 100px solid #0d96b6; border-bottom: 50px solid transparent; }
#triangle-topleft { width: 0; height: 0; border-top: 100px solid #0d96b6; border-right: 100px solid transparent; }
#triangle-topright { width: 0; height: 0; border-top: 100px solid #0d96b6; border-left: 100px solid transparent; }
#triangle-bottomleft { width: 0; height: 0; border-bottom: 100px solid #0d96b6; border-right: 100px solid transparent; }
#triangle-bottomright { width: 0; height: 0; border-bottom: 100px solid #0d96b6; border-left: 100px solid transparent; }
#trapezoid { border-bottom: 100px solid #0d96b6; border-left: 50px solid transparent; border-right: 50px solid transparent; height: 0; width: 100px; }
#parallelogram { width: 150px; height: 100px; -webkit-transform: skew(20deg); -moz-transform: skew(20deg); -o-transform: skew(20deg); background: #0d96b6; }
#star-six { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid #0d96b6; position: relative; }
#star-six:after { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-top: 100px solid #0d96b6; position: absolute; content: ""; top: 30px; left: -50px; }
#star-five { margin: 50px 0; position: relative; display: block; color: #0d96b6; width: 0px; height: 0px; border-right: 100px solid transparent; border-bottom: 70px solid #0d96b6; border-left: 100px solid transparent; -moz-transform: rotate(35deg); -webkit-transform: rotate(35deg); -ms-transform: rotate(35deg); -o-transform: rotate(35deg); }
#star-five:before { border-bottom: 80px solid #0d96b6; border-left: 30px solid transparent; border-right: 30px solid transparent; position: absolute; height: 0; width: 0; top: -45px; left: -65px; display: block; content: ''; -webkit-transform: rotate(-35deg); -moz-transform: rotate(-35deg); -ms-transform: rotate(-35deg); -o-transform: rotate(-35deg); }
#star-five:after { position: absolute; display: block; color: #0d96b6; top: 3px; left: -105px; width: 0px; height: 0px; border-right: 100px solid transparent; border-bottom: 70px solid #0d96b6; border-left: 100px solid transparent; -webkit-transform: rotate(-70deg); -moz-transform: rotate(-70deg); -ms-transform: rotate(-70deg); -o-transform: rotate(-70deg); content: ''; }
#pentagon { position: relative; width: 54px; border-width: 50px 18px 0; border-style: solid; border-color: #0d96b6 transparent; }
#pentagon:before { content: ""; position: absolute; height: 0; width: 0; top: -85px; left: -18px; border-width: 0 45px 35px; border-style: solid; border-color: transparent transparent #0d96b6; }
#hexagon { width: 100px; height: 55px; background: #0d96b6; 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 #0d96b6; }
#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 #0d96b6; }
#octagon { width: 100px; height: 100px; background: #0d96b6; position: relative; }
#octagon:before { content: ""; position: absolute; top: 0; left: 0; border-bottom: 29px solid #0d96b6; border-left: 29px solid #eee; border-right: 29px solid #eee; width: 42px; height: 0; }
#octagon:after { content: ""; position: absolute; bottom: 0; left: 0; border-top: 29px solid #0d96b6; border-left: 29px solid #eee; border-right: 29px solid #eee; width: 42px; height: 0; }
#diamond { width: 0; height: 0; border: 50px solid transparent; border-bottom-color: #0d96b6; position: relative; top: -50px; }
#diamond:after { content: ''; position: absolute; left: -50px; top: 50px; width: 0; height: 0; border: 50px solid transparent; border-top-color: #0d96b6; }
#diamond-shield { width: 0; height: 0; border: 50px solid transparent; border-bottom: 20px solid #0d96b6; position: relative; top: -50px; }
#diamond-shield:after { content: ''; position: absolute; left: -50px; top: 20px; width: 0; height: 0; border: 50px solid transparent; border-top: 70px solid #0d96b6; } #diamond-narrow { width: 0; height: 0; border: 50px solid transparent; border-bottom: 70px solid #0d96b6; position: relative; top: -50px; }
#diamond-narrow:after { content: ''; position: absolute; left: -50px; top: 70px; width: 0; height: 0; border: 50px solid transparent; border-top: 70px solid #0d96b6; }
| Developer | Krishna Babu |
| Username | krishnab |
| Uploaded | January 11, 2023 |
| Rating | 3 |
| Size | 2,518 Kb |
| Views | 4,048 |
Do you need developer help for Css3 shapes?
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!
Krishna Babu (krishnab) Script Codes
| Name | Size |
| Floating menu | 2,077 Kb |
| Background | 2,585 Kb |
| Fade out slideshow | 2,082 Kb |
| No effect slideshow | 2,123 Kb |
| Wipe slider | 2,370 Kb |
| Paging | 2,753 Kb |
| Customize Selector with Google Font | 2,448 Kb |
| Javascript Tab | 2,394 Kb |
| Horizontal Scrolling | 2,825 Kb |
| Page | 1,939 Kb |
Create amazing sales emails 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!
Similar Scripts & Codes
| Name | Username | Size |
| SCSS Unit Conversion | Jakob-e | 8,210 Kb |
| Part 19 Bootstrap split button dropdown | Venkatesha | 1,601 Kb |
| Loading animation | Codeams | 2,408 Kb |
| Full page table inside the grid | Twikito | 1,864 Kb |
| Hover Animation from UNIQLO | Insprd | 3,772 Kb |
| The Monty Hall Problem | Melatonind | 4,360 Kb |
| Print element on a page | Mrs_snow | 2,081 Kb |
| Simple DevTools | Deegill | 2,511 Kb |
| A simple log in form made with css | Mayurelbhar | 2,160 Kb |
| CubeTronic | Jurbank | 3,716 Kb |
Do you want hide your ip address?
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!