240806 TIL

채팅 내부 UI 설정
채팅 디자인의 꼬리 부분 (직각 삼각형)
1. tailwindcss의 border를 이용한 삼각형
border를 사용하여 삼각형을 만들 수 있었다. 하지만 border 자체로 만드는 것이기 때문에 내외부 색상을 다르게 할 수 없었다.
2. rotate
사각형을 만들고 45도를 돌리는 방법도 있었지만 원하는 디자인과 맞지 않았다.
3. Image
그 부분만 사진으로 받아와 붙여주는 방법으로 결정하였다.
시도 1 : 직각 삼각형의 테두리가 모두 있는 사진을 받아와 사용했다. 말풍선과의 연결부분 경계선이 지워지지 않는 문제점이 발생했다.
시도 2 : 한쪽을 없애고 z 인덱스를 높게 주어서 겹쳐 주었다.