div+css绘制一个卡通可爱的动物头效果代码-html代码-BFW代码库

div+css绘制一个卡通可爱的动物头效果代码

代码语言：html

代码描述：div+css绘制一个卡通可爱的动物头效果代码

代码标签： css 动物

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">





    <style>
        *, *::before, *::after{
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }
        
        body{
            background-color:cornflowerblue;
        }
        
        .div-1{
            width: 0; 
            height: 0; 
            border-top: 60px solid transparent;
            border-bottom: 60px solid transparent; 
            border-right: 60px solid darkmagenta; 
            border-radius: 45%;
            position:absolute;
            margin: auto;
            right:0;
            left:240px;
            top: 0;
            bottom: 290px;
        }
        
        .div-2{
            width: 0; 
            height: 0; 
            border-top: 60px solid transparent;
            border-bottom: 60px solid transparent; 
            border-left: 60px solid darkmagenta; 
            border-radius: 45%; 
            position:absolute;
            margin: auto;
            right:240px;
            left:0;
            top: 0;
            bottom: 290px;
        }
        
        .div-3{
            width: 0; 
            height: 0; 
            border-top: 150px solid transparent;
            border-bottom: 150px solid transparent; 
            border-right: 60px solid yellow;
            border-radius: 45%;
            position:absolute;
            margin: auto;
            right:0;
            left:-30px;
            top: 0;
            bottom: 200px;
        }
        
        .div-4{
            width: 0; 
            height: 0; 
            border-top: 150px solid transparent;
            border-bottom: 150px solid transparent; 
            border-right: 60px solid yellow;
            border-radius: 45%;
            position:absolute;
            margin: auto;
            right:0;
            left: -80px;
            top: 0;
            bottom: 150px;
        }
        
        .div-5{
            width: 0; 
            height: 0; 
            border-top: 150px solid transparent;
            border-bottom: 150px solid transparent; 
            border-right: 60px solid yellow;
            border-radius: 45%;
            position:absolute;
            margin: auto;
            right:0;
            left:10px;
            top: 0;
            bottom: 170px;
        }
        
        .div-6{
            height: 300px;
            width: 350px;
            background-color:darkorange;
            border-radius: 50% ;
            position:absolute;
            margin: auto;
            right:0;
            left:0;
            top: 0;
            bottom: 0;
            box-shadow: 0 -19px 0 8px mediumspringgreen;
        }
        
        .div-6::before{
            content: "";
            height: 0;
            width: 0;
            border-left: 300px solid transparent;
            border-right: 300px solid transparent; 
            border-bottom: 180px solid white; 
            border-radius: 20%;
            position:absolute;
            margin: auto;
            right:0;
            left:-125px;
            top: 0;
         .........完整代码请登录后点击上方下载按钮下载查看