🐷

htmlとcss(sass)でジブリのカオナシを作る

2022/08/26に公開約3,800字

cssのプロパティの使い方の練習にちょうど良いです。
仕組みは単純で空のdiv要素にカラー等を指定してるだけ

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./dist/css/main.css">
</head>
<body>
    <div id="head">
        <div id="top-corner-left"></div>
        <div id="top-corner-right"></div>
        <div id="left-eye"></div>
        <div id="right-eye"></div>
        <div id="bottom-corner-left"></div>
        <div id="bottom-corner-right"></div>
        <div id="mouth"></div>
    </div>
</body>
</html>
body{
    background-color: black;
}

#head{
    width: 200px;
    height: 300px;
    margin: 30% auto;
    position: relative;
    border-radius: 100px 100px 90px 90px / 100px 100px 140px 140px;
    background-color: rgb(255, 255, 255);

    #top-corner-left{
        display: inline-block;
        position: absolute;
        top: 15%;
        left: 17.5%;
        border-top: 40px solid transparent;
        border-right: 20px solid var(--corner-color);
        border-bottom: 10px solid transparent;
    }

    #top-corner-right{
        display: inline-block;
        position: absolute;
        top: 15%;
        right: 17.5%;
        border-top: 40px solid transparent;
        border-left: 20px solid var(--corner-color);
        border-bottom: 10px solid transparent;
    }

    #left-eye{
        width: 40px;
        height: 25px;
        background-color: rgb(32, 30, 30);
        position: absolute;
        top: 40%;
        left: 15%;
        border-radius: 16px 16px 16px 16px / 14px 14px 14px 14px ;
    }
    #left-eye::after{
        width: 25px;
        height: 20px;
        content: "";
        display: block;
        position: absolute;
        top: 20px;
        left: 16%;
        border-radius: 0 0 0 29px;
        border-width: 0 0 3px 3px;
        border-style: solid;
        border-color: rgb(32, 30, 30);
        transform: rotate(-40deg);
    }
    #right-eye{
        width: 40px;
        height: 25px;
        background-color: rgb(32, 30, 30);
        position: absolute;
        top: 40%;
        right: 15%;
        border-radius: 16px 16px 16px 16px / 14px 14px 14px 14px ;
    }
    #right-eye::after{
        width: 25px;
        height: 20px;
        content: "";
        display: block;
        position: absolute;
        top: 20px;
        left: 16%;
        border-radius: 0 0 0 29px;
        border-width: 0 0 3px 3px;
        border-style: solid;
        border-color: rgb(32, 30, 30);
        transform: rotate(-40deg);
    }

    #bottom-corner-left{
        display: inline-block;
        position: absolute;
        top: 57.5%;
        left: -2%;
        border-bottom: 80px solid transparent;
        border-right: 25px solid var(--corner-color);
        border-left: 40px solid transparent;
    }

    #bottom-corner-right{
        display: inline-block;
        position: absolute;
        top: 57.5%;
        right: -2%;
        border-bottom: 80px solid transparent;
        border-left: 25px solid var(--corner-color);
        border-right: 40px solid transparent;
    }

    #mouth{
        width: 40px;
        height: 10px;
        background-color: rgb(32, 30, 30);
        position: absolute;
        bottom: 10%;
        left: calc(50% - 20px);
        border-radius: 24px 24px 24px 24px / 14px 14px 14px 14px ;
    }    
    #mouth::after{
        width: 25px;
        height: 20px;
        content: "";
        display: block;
        position: absolute;
        top: 10px;
        left: 20%;
        border-radius: 0 0 0 29px;
        border-width: 0 0 3px 3px;
        border-style: solid;
        border-color: rgb(32, 30, 30);
        transform: rotate(-40deg);
    }
}

実行結果

GitHubで編集を提案

Discussion

ログインするとコメントできます