About
Explore
Events & Classes
Support Us
Join
Sign In
chessgamer49
View Project Page
Run
Fullscreen
Untitled
HTML
CSS
JS
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <h2>Regular Shapes with CSS</h2> <div class="square"></div> <br> <button type="button">Square</button> <div class="circle"></div> <button type="button">circle</button> <br> <div class="oval"></div> <br> <button type="button">oval</button> <div class="rectangle"></div> <br> <button type="button">rectanle</button> <div class="parallelogram"></div> <br> <button type="button">parallelogram</button> <div class="triangle-up"></div> <br> <button type="button">triangle facing up</button> <div class="triangle-down"></div> <button type="button">triangle facing down</button> <div class="triangle-left"></div> <button type="button">triangle facing left</button> <div class="triangle-right"></div> <br> <button type="button">triangle facing right</button> <div class="trapezoid"></div> <button type="button">trapeziod</button> </body> </html>
.square { height: 90px; width: 90px; background-color: purple; } .circle { height: 80px; width: 80px; background-color: red; border-radius: 50%; } .oval { height: 50px; width: 100px; background-color: green; border-radius: 50%; } .rectangle { height: 50px; width: 100px; background-color: blue; } .parallelogram { width: 100px; height: 50px; transform: skew(20deg); background: pink; } .triangle-up { width: 0; height: 0; border-left: 25px solid transparent; border-right: 25px solid transparent; border-bottom: 50px solid yellow; } .triangle-down { width: 0; height: 0; border-left: 25px solid transparent; border-right: 25px solid transparent; border-top: 50px solid dodgerblue; } .triangle-left { width: 0; height: 0; border-top: 25px solid transparent; border-right: 50px solid #cad; border-bottom: 25px solid transparent; } .triangle-right { width: 0; height: 0; border-top: 25px solid transparent; border-left: 50px solid #dee; border-bottom: 25px solid transparent; } .trapezoid { border-bottom: 50px solid #26a2ab; border-left: 25px solid transparent; border-right: 25px solid transparent; height: 0; width: 125px; }