CSS로 빈 갈매기형 화살표를 만드는 방법은 무엇입니까?

CSS로 갈매기 모양 화살표 만들기

질문

CSS를 사용하면 코드 스니펫에 표시된 대로 채워진 삼각형을 쉽게 만들 수 있습니다. 아래:

<code class="css">#triangle {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid red;
}</code>

그런데 아래 이미지와 같이 속이 빈 화살표 모양의 삼각형을 어떻게 만들 수 있나요?

[갈매기형 화살표 이미지]

답변

CSS를 사용하여 의사 요소 앞이나 뒤를 사용하여 이러한 유형의 화살표를 만들 수 있습니다. 프로세스는 다음과 같습니다.

• 원하는 요소에 이전 또는 이후 의사 요소를 추가하세요.
• CSS 스타일을 적용하여 의사 요소의 모양과 위치를 맞춤설정하세요.

예를 들어 다음 CSS를 사용할 수 있습니다.

<code class="css">::before {
    content: "";
    position: absolute;
    width: 0.5em;
    height: 0.5em;
    border-top: 1px solid black;
    border-right: 1px solid black;
    transform: rotate(45deg);
    margin-right: 0.5em;
}</code>

이 CSS는 45도 회전된 검은색 윤곽선이 있는 속이 빈 삼각형을 만듭니다. 너비, 높이 및 테두리 속성을 조정하여 모양을 사용자 정의할 수 있습니다.

또는 의사 요소를 사용하지 않고도 이 효과를 얻을 수도 있습니다.

• 새 또는
• CSS를 사용하여 크기, 색상, 회전 등 요소의 스타일을 화살표로 지정합니다.

예는 다음과 같습니다.

<code class="css">.chevron {
    display: inline-block;
    width: 0.5em;
    height: 0.5em;
    border-top: 1px solid black;
    border-right: 1px solid black;
    transform: rotate(45deg);
    margin-right: 0.5em;
}</code>

이 경우 원하는 요소에 .chevron 클래스를 추가하면 화살표 효과를 연출할 수 있습니다.