css로 말풍선 만들기

🚨 아이콘을 눌렀을 경우 안내되는 메시지를 말풍선으로 표현하고싶었다. css로 요리조리 조절해서 이런 모양도 만들 수 있는 세계에 신기함을 느끼는 중

.ballon {
    display: none;
    position: absolute;
    width: 205px;
    height: 40px;
    left: 448px;
    bottom: 62px;
    background: #484848;
    color: white;
    border-radius: 5px;
    padding: 12px 12.8px;
}


.ballon:after {
    border-top: 10px solid #484848;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 0px solid transparent;
    content: "";
    position: absolute;
    top: 40px;
    left: 160px;
}

말풍선모양은 : after을 통해서 조절하면된다!
뾰족한 화살표? 부분을 변경하고자 하면 border-top 또는 border-bottom을 조절하면 되고 요게 네모 모양+화살표 모양을 각각 만들어서 합쳐 놓은거라 :after의 top/left처럼 위치 조정도 가능하다!