CSSArrowPlease.com은 어떻게 화살표를 생성합니까?

Question

저는 이것을 내 웹 사이트에서 사용했지만 CSS를 사용하여 화살표를 생성하는 방법에 대해 당혹 스럽습니다.

CSS 내에서 "모양 생성"이 비명 지르는 것처럼 보이지 않습니다. their website에 표시

기본 CSS는 다음과 같습니다

.arrow_box { 
    position: relative; 
    background: #88b7d5; 
    border: 4px solid #c2e1f5; 
} 
.arrow_box:after, .arrow_box:before { 
    bottom: 100%; 
    border: solid transparent; 
    content: " "; 
    height: 0; 
    width: 0; 
    position: absolute; 
    pointer-events: none; 
} 

.arrow_box:after { 
    border-color: rgba(136, 183, 213, 0); 
    border-bottom-color: #88b7d5; 
    border-width: 30px; 
    left: 50%; 
    margin-left: -30px; 
} 
.arrow_box:before { 
    border-color: rgba(194, 225, 245, 0); 
    border-bottom-color: #c2e1f5; 
    border-width: 36px; 
    left: 50%; 
    margin-left: -36px; 
} 

이 화살을 만들 않는 방법

?

감사

Answer 1

그것은 "전에"를 사용하고 모든 선택기 화살표를 만들기 위해 결합의 CSS "후"의사 요소 http://www.w3schools.com/css/css_pseudo_elements.asp