css 삼각형만들기

참고) kamang-it.tistory.com/entry/css%EC%A7%80%EC%98%A5%EC%97%90%EC%84%9C-%ED%83%88%EC%B6%9C%ED%95%98%EC%9E%906-css%EB%A1%9C-%EC%82%BC%EA%B0%81%ED%98%95%EC%9D%84-%EA%B7%B8%EB%A0%A4%EB%B3%B4%EC%9E%90?category=772188

css지옥에서 탈출하자(6) - css로 삼각형을 그려보자

nanati.me/css-balloons-menu/

마우스를 대면 말풍선이 나오는 메뉴

 

https://nuli.navercorp.com/community/article/1132695

CSS로 그리는 그림, Pure CSS Drawing

 

 

 

 

 

.tooltipBox.lastSmall{
  width: auto;
  top: 50%;
  bottom:initial;
  right: 9px;
  transform:translateY(18px);
  background: #fff;
  padding: 10px;
  border:1px solid #ccc;
  border-radius: 10px;
	
  z-index: 100;
}
.tooltipBox.lastSmall:before{
  content: ''; 
  width: 0; 
  height: 0; 
  position: absolute; 
  top: -11px; 
  right:8px; 
  border-bottom:10px solid #ccc;
  border-left:10px solid transparent;
}
.tooltipBox.lastSmall:after {
  content: ''; 
  width: 0; 
  height: 0; 
  position: absolute; 
  border-bottom:10px solid #fff;
  border-left:10px solid transparent;
  top:-10px; 
  right:9px; 
}