CSS를 사용하여 삼각형 화살표 패턴을 그리는 기술에 대한 자세한 설명

최근에 이 웹사이트를 수정하고 프롬프트 상자를 추가하고 싶습니다. 이것은 충분히 쉽지만 툴팁에 삼각형 화살표가 있기를 원합니다. 하지만 사진을 활용하고, 다양한 색상과 방향의 수많은 화살을 준비해야 한다는 점을 생각하면 재앙에 가깝습니다. 다행히 MooTools의 핵심 개발자인 Darren Waddell이 나에게 CSS로 삼각형 화살표를 그리는 훌륭한 기술에 대해 알려주었습니다. 순수 CSS를 사용하면 다양한 브라우저와 호환되는 삼각형 화살표를 만드는 데 코드가 거의 필요하지 않습니다!

CSS 코드

/* create an arrow that points up */
p.arrow-up {   
 width: 0;    
 height: 0;    
 border-left: 5px solid transparent;  /* left arrow slant */
 border-right: 5px solid transparent; /* right arrow slant */
 border-bottom: 5px solid #2f2f2f; /* bottom, add background color here */
 font-size: 0;   
 line-height: 0;   
}   

/* create an arrow that points down */
p.arrow-down {   
 width: 0;    
 height: 0;    
 border-left: 5px solid transparent;   
 border-right: 5px solid transparent;   
 border-top: 5px solid #2f2f2f;   
 font-size: 0;   
 line-height: 0;   
}   

/* create an arrow that points left */
p.arrow-left {   
 width: 0;    
 height: 0;    
 border-bottom: 5px solid transparent;  /* left arrow slant */
 border-top: 5px solid transparent; /* right arrow slant */
 border-right: 5px solid #2f2f2f; /* bottom, add background color here */
 font-size: 0;   
 line-height: 0;   
}   

/* create an arrow that points right */
p.arrow-rightright {   
 width: 0;    
 height: 0;    
 border-bottom: 5px solid transparent;  /* left arrow slant */
 border-top: 5px solid transparent; /* right arrow slant */
 border-left: 5px solid #2f2f2f; /* bottom, add background color here */
 font-size: 0;   
 line-height: 0;   
}

이 삼각형을 그리는 핵심은 화살표 방향의 양면을 테두리가 매우 두껍습니다. 화살표 반대쪽을 향하는 쪽에도 동일한 두꺼운 테두리가 있고 이 쪽의 색상은 삼각형의 색상입니다. 테두리가 두꺼울수록 삼각형이 커집니다. 이렇게 하면 다양한 색상, 크기 및 방향의 화살표를 그릴 수 있습니다. 가장 좋은 점은 이 효과를 얻으려면 몇 줄의 CSS 코드만 필요하다는 것입니다.

CSS 삼각형을 그리려면 :before 및 :after 사용

위 CSS 예제에서는 실제 페이지 요소를 사용하여 그리지만 때로는 실제 요소도 사용됩니다. 그런데 직접 가서 조작할 수는 없잖아요? 순수한 CSS 삼각형은 실제로 의사 요소를 사용하여 그릴 수 있습니다. 그리는 방법은 다음과 같습니다.

p.tooltip {   
 /* tooltip content styling in here; nothing to do with arrows */
}   

/* shared with before and after */
p.tooltip:before, p.tooltip:after {   
 content: ' ';   
 height: 0;   
 position: absolute;   
 width: 0;   
 border: 10px solid transparent; /* arrow size */
}   

/* these arrows will point up */

/* top-stacked, smaller arrow */
p.tooltip:before {   
 border-bottom-color: #fff;  /* arrow color */

 /* positioning */
 position: absolute;   
 top: -19px;   
 left: 255px;   
 z-index: 2;   
}   

/* arrow which acts as a background shadow */
p.tooltip:after {   
 border-bottom-color: #333;  /* arrow color */

 /* positioning */
 position: absolute;   
 top: -24px;   
 left: 255px;   
 z-index: 1;   
}

화살표 반대쪽 테두리의 색상은 삼각형 화살표의 색상입니다. 이 화살표를 그리기 위해 :before와 :after 의사 요소를 모두 사용할 필요는 없습니다. 하나만 있으면 충분합니다. 그리고 다른 하나는 이전 것의 배경 그림자나 배경 가장자리로 사용할 수 있습니다.

이 기술을 진작에 알았어야 했는데! 저는 이 간단하고 번거롭지 않은 기술이 앞으로 인터페이스를 개선할 때 도움이 될 것이라고 믿습니다.

위 내용은 이 글의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다.

위 내용은 CSS를 사용하여 삼각형 화살표 패턴을 그리는 기술에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!