Scribd Logo
Upload

Welcome to Scribd!

  • Shapes HTML & Css

    Uploaded by

    4othercorrespondence
    27 views6 pages
    This document contains CSS code to style various shapes - a square, oval, triangle, circle, and five-pointed star. It defines CSS classes for each shape with properties like background color, width, height, and border radius that produce the different geometric forms when applied to HTML div elements on the page. Examples of each shaped div are then included in the body to display the CSS styling.

    Original Description:

    HTML and CSS for shapes

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    This document contains CSS code to style various shapes - a square, oval, triangle, circle, and five-pointed star. It defines CSS classes for each shape with properties like background color, width, height, and border radius that produce the different geometric forms when applied to HTML div elements on the page. Examples of each shaped div are then included in the body to display the CSS styling.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pdf or txt
    27 views6 pages

    Shapes HTML & Css

    Uploaded by

    4othercorrespondence
    This document contains CSS code to style various shapes - a square, oval, triangle, circle, and five-pointed star. It defines CSS classes for each shape with properties like background color, width, height, and border radius that produce the different geometric forms when applied to HTML div elements on the page. Examples of each shaped div are then included in the body to display the CSS styling.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pdf or txt
    of 6

    !

    Doctype HTML>
    <html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
    .special {
    height: 50px;
    width: 50px;
    background-color: #555;
    }
    .square {
    background: lightblue;
    width: 100px;
    height: 100px;
    }
    .oval {
    width: 200px;
    height: 100px;
    background: red;
    border-radius: 100px / 50px;
    }
    .triangle-up {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid red;
    }
    .circle {
    width: 100px;
    height: 100px;
    background: yellow;
    border-radius: 50%
    }
    .star-five {
    margin: 50px 0;
    position: relative;
    display: block;
    color: red;
    width: 0px;
    height: 0px;
    border-right: 100px solid transparent;
    border-bottom: 70px solid red;
    border-left: 100px solid transparent;
    transform: rotate(35deg);
    }
    .star-five:before {
    border-bottom: 80px solid red;
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
    position: absolute;
    height: 0;
    width: 0;
    top: -45px;
    left: -65px;
    display: block;
    content: '';
    transform: rotate(-35deg);
    }
    .star-five:after {
    position: absolute;
    display: block;
    color: red;
    top: 3px;
    left: -105px;
    width: 0px;
    height: 0px;
    border-right: 100px solid transparent;
    border-bottom: 70px solid red;
    border-left: 100px solid transparent;
    transform: rotate(-70deg);
    content: '';
    }
    </style>
    </head>
    <body>
    <div class="special1">
    <p> This is a section - called a div - short for division </p>
    </div>
    <h2>Square CSS</h2>
    <div class="square"></div>
    <br>
    <div class="oval"></div>
    <br>
    <div class="triangle-up"></div>
    <br>
    <div class="circle"></div>
    <br>
    <div class="star-five"></div>

    </body>
    </html>

    You might also like