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 자식 푸시
Reference
이 문제에 관하여(CSS 할로윈 얼굴: 구울), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/jarvisscript/css-halloween-faces-4lo3텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)