今天给大家分享的这个项目是 Lynn Fisher 创建的 A Single Div: a CSS drawing project

    可以点击查看：https://a.singlediv.com/

    我们找两个效果来看看，她是怎么实现的：

    image.png

    1. #css-three div {
    2.     width: 300px;
    3.     height: 100px;
    4.     margin-left: -150px;
    5.     margin-top: -50px;
    6.     background-repeat: no-repeat;
    7.     background-image: linear-gradient(to right,#f2612f 5.3%,transparent 5.3%,transparent 10%,#f2612f 10%,#f2612f 13%,transparent 13%),linear-gradient(65deg,transparent 44%,#f2612f 44%,#f2612f 49%,transparent 49%,transparent 53%,#f2612f 53%,#f2612f 56%,transparent 56%),linear-gradient(65deg,transparent 74%,#f2612f 74%,#f2612f 79%,transparent 79%,transparent 83%,#f2612f 83%,#f2612f 86%,transparent 86%);
    8.     background-size: 100% 100%;
    9.     background-position: 0 0;
    10. }
    12. #css-three div:before {
    13.     width: 310px;
    14.     height: 216px;
    15.     left: 50%;
    16.     top: -58px;
    17.     margin-left: -155px;
    18.     background-repeat: repeat-x;
    19.     background-image: radial-gradient(circle at bottom,#42c3d0 22%,transparent 22%,transparent 45%,#242b33 45%,#242b33 66%,transparent 66%),radial-gradient(circle at top,#42c3d0 22%,transparent 22%,transparent 45%,#242b33 45%,#242b33 66%,transparent 66%);
    20.     background-size: 33.333% 45px;
    21.     background-position: 0 0,0 100%
    22. }
    24. #css-three div:after {
    25.     width: 300px;
    26.     height: 100px;
    27.     background-repeat: no-repeat;
    28.     background-image: radial-gradient(circle at top,#f2612f 14%,transparent 14%),radial-gradient(circle at top,#f2612f 14%,transparent 14%),radial-gradient(circle at top,#f2612f 14%,transparent 14%),radial-gradient(circle at bottom,#f2612f 14%,transparent 14%),radial-gradient(circle at bottom,#f2612f 14%,transparent 14%),radial-gradient(circle at bottom,#f2612f 14%,transparent 14%);
    29.     background-size: 30% 100%;
    30.     background-position: 15% 0,64% 0,114% 0,15% 100%,35% 100%,85% 100%
    31. }

    image.png

    1. #rey div {
    2.     width: 90px;
    3.     height: 140px;
    4.     margin-left: -45px;
    5.     margin-top: -70px;
    6.     background-color: #d2b48c;
    7.     border-radius: 100px 100px 110% 110%;
    8.     -webkit-box-shadow: -3px 11px 0 -7px rgba(139,69,19,0.4),0 20px 0 -6px #caa778,inset 8px 0 0 rgba(0,0,0,0.07);
    9.     box-shadow: -3px 11px 0 -7px rgba(139,69,19,0.4),0 20px 0 -6px #caa778,inset 8px 0 0 rgba(0,0,0,0.07);
    10. }
    12. #rey div:before {
    13.     width: 70px;
    14.     height: 80px;
    15.     left: 50%;
    16.     top: 34px;
    17.     margin-left: -35px;
    18.     background-color: #f5a968;
    19.     background-repeat: no-repeat;
    20.     background-image: radial-gradient(circle,rgba(255,255,255,0.6) 50%,transparent 50%),radial-gradient(circle,#4d523e 50%,transparent 50%),radial-gradient(circle,rgba(255,255,255,0.6) 50%,transparent 50%),radial-gradient(circle,#4d523e 50%,transparent 50%),radial-gradient(circle,#d29152 50%,transparent 50%),radial-gradient(circle,#d29152 50%,transparent 50%),radial-gradient(circle,#d29152 50%,transparent 50%),radial-gradient(circle,#d29152 50%,transparent 50%),radial-gradient(circle,#d29152 50%,transparent 50%),radial-gradient(circle,#d29152 50%,transparent 50%),radial-gradient(ellipse at 50% 120%,#cd853f 50%,transparent 50%),radial-gradient(ellipse at 50% 120%,#cd853f 50%,transparent 50%),radial-gradient(ellipse at 50% -20%,#cd853f 50%,transparent 50%);
    21.     background-size: 4px 4px,14px 14px,4px 4px,14px 14px,3px 3px,3px 3px,3px 3px,3px 3px,3px 3px,3px 3px,15px 7px,15px 7px,18px 7px;
    22.     background-position: 13px 33px,10px 30px,49px 33px,46px 30px,13px 48px,17px 53px,20px 48px,48px 48px,52px 53px,55px 48px,23px 55px,32px 55px,50% 62px;
    23.     border-top-left-radius: 110px 80px;
    24.     border-top-right-radius: 110px 80px;
    25.     border-bottom-left-radius: 110px;
    26.     border-bottom-right-radius: 110px;
    27.     -webkit-box-shadow: inset 3px 0 rgba(0,0,0,0.2),inset -3px 0 rgba(0,0,0,0.2),inset 9px 0 rgba(0,0,0,0.1),inset -9px 0 rgba(0,0,0,0.1),3px 5px 0 5px #d2b48c,7px 14px 0 rgba(139,69,19,0.4);
    28.     box-shadow: inset 3px 0 rgba(0,0,0,0.2),inset -3px 0 rgba(0,0,0,0.2),inset 9px 0 rgba(0,0,0,0.1),inset -9px 0 rgba(0,0,0,0.1),3px 5px 0 5px #d2b48c,7px 14px 0 rgba(139,69,19,0.4)
    29. }
    31. #rey div:after {
    32.     width: 28px;
    33.     height: 14px;
    34.     left: 10px;
    35.     top: 28px;
    36.     background: #444;
    37.     border-top-left-radius: 20px;
    38.     border-top-right-radius: 20px;
    39.     border-bottom-left-radius: 30px;
    40.     border-bottom-right-radius: 30px;
    41.     -webkit-box-shadow: -25px -5px 0 -6px #b08245,-25px 5px 0 -6px #b08245,65px -5px 0 -6px #b08245,65px 5px 0 -6px #b08245,40px 0 0 #444,0 0 0 8px #cba97a,40px 0 0 8px #cba97a,0 0 0 14px #b98b4d,40px 0 0 14px #b98b4d,0 4px 0 14px rgba(0,0,0,0.15),40px 4px 0 14px rgba(0,0,0,0.15);
    42.     box-shadow: -25px -5px 0 -6px #b08245,-25px 5px 0 -6px #b08245,65px -5px 0 -6px #b08245,65px 5px 0 -6px #b08245,40px 0 0 #444,0 0 0 8px #cba97a,40px 0 0 8px #cba97a,0 0 0 14px #b98b4d,40px 0 0 14px #b98b4d,0 4px 0 14px rgba(0,0,0,0.15),40px 4px 0 14px rgba(0,0,0,0.15)
    43. }

    其他的效果，自己去看上面的网站吧，有没有觉得CSS的威力还是很强大的！