라이언 만들기3 -css

여기서 코아래 부분의 border을 입 모양에 맞게 자연스럽게 지우고 싶다.

가운데 보더부분에 하얀색 작은 마름모모양의 두개의 사각형을 살짝 겹치면 ^ 이 모양으로 저 보더를 자연스럽게 가릴 수 있다.

우선은 html에 새로운 요소를 만들기 보다는 css의 가상선택자를 만들어 저것을 지울거다.

.ryan .mouth:before{
content : "";
}
이렇게 하면 mouth앞에 가상선택자 생성 완료

부피가 없기 때문에 width, height, background 모두 지정해준다.
그리고 이제 그 사각형을 45도 돌려 마름모 모양으로 만들어주기

-webkit-transform: rotate(-45deg); // webkit은 크롬 사파리 크로스 브라우징을 위해 추가
 transform: rotate(-45deg);

그리고

.ryan .mouth.left:before {
    top: 1px;
    left: 24px;
}

.ryan .mouth.right:before{
    top: 1px;
    right: 31px;
}

모양에 맞게 위치를 지정해준다면..!!

https://zinee-world.tistory.com/426?category=900337