하단 화살표가있는 CSS 화살표

Question

div 안에 화살표를 만들어야합니다. 나는 화살표를 생성하지만, 시도 샘플의

데모 아래와 같이 같이 경계와 visul 효과를 얻을 필요가있다 http://jsfiddle.net/rLZkf/4/

div { 
 
    margin: 20px; 
 
    height: 200px; 
 
    width: 200px; 
 
    background-color: #c1c1c1; 
 
    border: #000 solid 2px; 
 
    background-image: -webkit-linear-gradient(135deg, transparent 75%, #fff 75%), -webkit-linear-gradient(45deg, transparent 75%, #fff 75%); 
 
    background-image: -moz-linear-gradient(135deg, transparent 75%, #fff 75%), -moz-linear-gradient(45deg, transparent 75%, #fff 75%); 
 
    background-image: -ms-linear-gradient(135deg, transparent 75%, #fff 75%), -ms-linear-gradient(45deg, transparent 75%, #fff 75%); 
 
    background-image: -o-linear-gradient(135deg, transparent 75%, #fff 75%), -o-linear-gradient(45deg, transparent 75%, #fff 75%); 
 
    background-image: linear-gradient(135deg, transparent 75%, #fff 75%), linear-gradient(45deg, transparent 75%, #fff 75%); 
 
    background-position: 30px 0, 0 0; 
 
    background-repeat: no-repeat; 
 
    background-size: 30px 30px; 
 
}

<div></div>

Answer 1

사용할 수있는 CSS3 속성을 사용하십시오. 다음과 같이 쓰기 :

div { 
    margin:20px; 
    height: 200px; 
    width: 200px; 
    background-color: #c1c1c1; 
    border:#000 solid 2px; 
    position:relative; 
} 
div:after{ 
    content:''; 
    width:20px; 
    height:20px; 
    background:#fff; 
    position:absolute; 
    -moz-transform:rotate(45deg); 
    -webkit-transform:rotate(45deg); 
    transform:rotate(45deg); 
    top:-11px; 
    left:10px; 
    border-right:#000 solid 2px; 
    border-bottom:#000 solid 2px; 
} 

확인이 http://jsfiddle.net/rLZkf/6/

업데이트]

확인 개인적으로이 http://jsfiddle.net/rLZkf/9/

Answer 2

, 나는 확실히 여기 선택한 대답에 다른 접근 방법을 사용하는 것을 좋아합니다.

예를 들어 https://css-tricks.com/snippets/css/css-triangle/에서 설명한 원리를 사용하면 두 개의 의사 요소를 사용하여 이후에 적용 할 효과를 만들 수 있습니다.

기본적으로이 경계 트릭을 사용하여 두 개의 삼각형을 만듭니다. 하나는 페이지 배경과 같은 색이고 다른 하나는 컨테이너 테두리와 같을 것이고 첫 번째 삼각형의 '테두리'역할을합니다.

그런 다음 두 삼각형의 위치가 오프셋되어 컨테이너 경계 상단에 오게됩니다.

.container:after, 
.container:before { 
    border-left: 10px solid transparent; 
    border-right: 10px solid transparent; 
    content: " "; 
    left: 10px; 
    margin-top: -1px; 
    position: absolute; 
} 

.container:before { 
    border-top: 10px solid #000; 
    top: 1px; 
} 

.container:after { 
    border-top: 10px solid #fff; 
    top: 0px; 
} 

물론 Sass 또는 이와 유사한 것을 사용하고 색상/화살표 크기를 사용하면 믹스 인으로 전체를 감쌀 수 있습니다.

빠른 예를