esercitazioni/e04_corners/index.html

<!DOCTYPE html>
<!-- 
    I chose to use a pseudo-element for the top-left and bottom-right corners,
    and a div for the top-right and bottom-left corners.
    I did this because I wanted to show that it is possible to use both methods.
    I also use transform: rotate() to rotate the icon, because I wanted to show
    that it is possible to use it to rotate the icon and use a single image instead of 4.

    It's a bit advanced for this exercise, but it's possible to recreate the same effect
    using only img tags and position them with absolute positioning.

    It's also possibile use an helper class to avoid repeating the same position attributes.
-->
<html>
    <head>
        <meta charset="utf-8">
        <title>Web development - Exercise n.4</title>

        <style>
            /* Reset */
            html, body, * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }

            .content {
                border: 2px solid gray;
                min-height: fit-content;
                min-width: fit-content;
                margin: 2rem 6rem;
                padding: 4rem;
                position: relative;
            }

            .content::before,
            .content::after,
            .content .corner-top-right,
            .content .corner-bottom-left {
                content: url(./icon.png);
                position: absolute;
            }

            /* Use pseudo-element */
            .content::before {
                top: -30px;
                left: -30px;
            }

            .content::after {
                bottom: -30px;
                right: -30px;
                transform: rotate(180deg);
            }

            /* Use div */
            .content .corner-top-right {
                top: -30px;
                right: -30px;
                transform: rotate(90deg);
            }

            .content .corner-bottom-left {
                bottom: -30px;
                left: -30px;
                transform: rotate(-90deg);
            }
        </style>
    </head>

    <body>
        <div class="content">
            <div class="corner-top-right"></div>
            <div class="corner-bottom-left"></div>
            All of a sudden cat goes crazy attack the child
            yet and sometimes switches in french and say "miaou"
            just because well why not bird bird bird bird bird bird
            human why take bird out i could have eaten that. Eat grass,
            throw it back up to pet a cat, rub its belly, endure blood and agony,
            quietly weep, keep rubbing belly lies down or drink water out of the
            faucet and furrier and even more furrier hairball so love and coo
            around boyfriend who purrs and makes the perfect moonlight eyes so
            i can purr and swat the glittery gleaming yarn to him
            (the yarn is from a $125 sweater) need to check on human,
            have not seen in an hour might be dead oh look, human is alive,
            hiss at human, feed me. Always ensure to lay down in such a manner
            that tail can lightly brush human's nose disappear for four days
        </div>
    </body>
</html>