반응형
배경색이 없고 border만 있는 말풍선 그리기 CSS입니다.
.bollom
{
position: relative;
padding: 10px 10px 10px 10px;
background: #FFFFFF;
border-radius: 5px;
border: #7F7F7F solid 1px;
position: absolute;
font-size: 16px;
text-align: left;
width: 200px;
height: 100px;
}
.bollom:after
{
content: '';
position: absolute;
border-style: solid;
border-width: 0 16px 20px 17.5px;
border-color: #FFFFFF transparent;
display: block;
width: 0;
z-index: 1;
top: -18.5px;
left: 49px;
}
.bollom:before
{
content: '';
position: absolute;
border-style: solid;
border-width: 0 16px 20px 17.5px;
border-color: #7F7F7F transparent;
display: block;
width: 0;
z-index: 0;
top: -20px;
left: 49px;
}
반응형
'Programming > Web' 카테고리의 다른 글
CSS 프로그레스 바(progress bar) (0) | 2021.10.12 |
---|---|
<button> 버튼 태그가 작동 안될 때 (0) | 2021.10.10 |
모달창 중앙정렬 하기 (0) | 2021.02.18 |
자바 스크립트 - Fancybox를 이용한 이미지 갤러리 만들기, Fancybox 이미지 동적으로 추가하기 (0) | 2021.01.28 |
DOM 노드트리 순회하기 (0) | 2021.01.04 |
댓글