CSS 할로윈 얼굴: 구울

여기 내가 해골을 만들려고 할 때 만든 구울이 있습니다.



눈은 내 이전의 눈과 비슷합니다. 방금 동공과 캐치라이트를 원형으로 만들었습니다. 높이와 너비를 동일하게 만들어 정사각형을 만든 다음 border-radius: 100%를 추가합니다.

HTML

    <div class="minifig_face">
    <div class="eyes_pair">
        <div class="eye_socket">
            <div class="eyes">          
                <div class="pupil">
                    <div class="catchlight"></div>
                </div>
            </div>
            <div class="eyes">
                <div class="pupil">
                    <div class="catchlight">
                </div>
            </div>
            </div>
        </div>              
    </div>

CSS

.pupil {
    width: 50px;
    height: 50px;
    margin-top: 50px;
    background: red;
    border-radius: 100%;
    display: flex;
    justify-content: center;
    position: relative;
}

.catchlight {
    width: 4px;
    height: 4px;
    margin-top: 25px;
    background: rgb(26 23 23);
    border-radius: 100%;
    display: flex;
    justify-content: center;
} 

입은 외계인과 같은 타원형입니다. 송곳니를 길게 만들었지만 overflow: hidden를 사용하여 치아 뿌리를 숨겼습니다.

.mouth {
    width: 200px;
    height: 80px;
    background: rgb(51 51 51);
    margin-top: 90px;
    border-radius: 100px;
    border: 4px solid black;
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.fangs {
    width: 5px;
    height: 65px;
    margin-top: -50px;
    background: #fff;
    border-radius: 100%;
    display: flex;
    justify-content: center;
    position: relative;
    border: solid 1px black; 
}

.fangs_bottom {
    width: 7px;
    height: 100px;
    margin-bottom:  -50px;
    background: #fff;
    border-radius: 100%;
    display: flex;
    justify-content: center;
    position: relative;
    border: solid 1px black;
}

경계선을 사각형으로 만들고 옆면은 투명하지만 밑면은 단색으로 하여 코를 추가했습니다.

.nose_pair {

    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.leftNostril {
    border-left: 30px solid transparent;
      border-bottom: calc(4 * 20px * 0.8) solid rgb(26 23 23);
    display: inline-block;
    margin-bottom: -70px;
}

.bridge {
    width: 2px;
    height: 22px;
}

.rightNostril {
    border-right: 30px solid transparent; 
    border-bottom: calc(4 * 20px * 0.8) solid rgb(26 23 23);
    display: inline-block;
    margin-bottom: -70px;
}

Cody Pearce의 .



다음 시간: 해골

CSS로 멋진 것을 만들어 본 적이 있습니까? 그것을 공유하십시오.

-$JarvisScript 자식 푸시