날짜를 풍선처럼 표시하는 방법

<style type=”text/css”> .entry-date { display: inline-block; position: relative; padding: 6px 8px; background: #2C3E50; color: #fff; text-shadow: 1px 1px 1px #000; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; line-height: 1; font-size: 11px; } .entry-date:before { content: ”; position: absolute; border-top: 5px solid #2C3E50; border-right: 5px solid rgba(0, 0, 0, 0); border-left: 5px solid rgba(0, 0, 0, 0); bottom: -5px; left: 36px; } </style> <div class=”entry-date”> 2014-12-04 </div> 위 예제는 화살표가 밑에 붙는데 왼쪽에 붙이려면 아래와 같다.

.entry-date:before {
  content: '';
  position: absolute;
  top: 6px;
  left: -5px;
  border-right: 5px solid #2C3E50;
  border-top: 5px solid rgba(0, 0, 0, 0);
  border-bottom: 5px solid rgba(0, 0, 0, 0);
}
]]>

Related Posts