반응형
요즘 새발자는 CSS 를 열심히 연마하고 있다. 오늘은 테두리가 있는 툴팁을 만들어 볼 것이다.
테두리가 없는 툴팁은 비교적 만들기 쉬운 편인데, 테두리가 있는 툴팁은 조금 까다로웠다.
그래서 잊지 않도록 기록을 남겨본다.
CSS - 테두리가 있는 툴팁(말풍선) 만들기
결과화면 미리보기
하늘색 바탕에 파란색 테두리가 있는 툴팁이 완성되었다.
HTML
<div className="task-tooltip">
새발자는 오늘도 뚠뚠.. 모두들 화이팅입니다.
</div>
CSS
before 로 삼각형을 after 로 삼각형의 테두리를 만들어주었다.
.task-tooltip {
background-color: #eef3fd;
border: #7689fd solid 1px;
border-radius: 5px;
color: #505bf0;
font-size: 12px;
font-weight: 500;
height: auto;
letter-spacing: -0.25px;
margin-top: 6.8px;
padding: 5px 11px;
position: relative;
width: fit-content;
z-index: 100;
}
.task-tooltip::after {
border-color: #eef3fd transparent;
border-style: solid;
border-width: 0 6px 8px 6.5px;
content: '';
display: block;
left: 75px;
position: absolute;
top: -7px;
width: 0;
z-index: 1;
}
.task-tooltip::before {
border-color: #7689fd transparent;
border-style: solid;
border-width: 0 6px 8px 6.5px;
content: '';
display: block;
left: 75px;
position: absolute;
top: -8px;
width: 0;
z-index: 0;
}
반응형
'JavaScript' 카테고리의 다른 글
CSS - 가운데서 좌우로 펼쳐지는 라인 애니메이션 (0) | 2021.11.05 |
---|---|
JavaScript - Break문 vs Continue문 (0) | 2021.10.14 |
CSS - 툴팁 삼각형 화살표 만들기 (0) | 2021.09.30 |
CSS - input 체크박스 테두리 스타일 변경하기 (0) | 2021.09.29 |
JavaScript - split()으로 문자열 자르기 (파일명에서 확장자만 따로 분리하기) (0) | 2021.09.28 |
댓글