오, 삼각형 빵 부스러기 리본을 만드는 많은 방법!

삼각형 빵 부스러기 조각을 만드는 다양한 방법

이 기사는 단계별 Breadcrumb Navigation에서 볼 수있는 각 블록에서 V 자형 모양 및 노치와 비슷한 일련의 상호 연결된 링크를 만드는 방법을 살펴 봅니다.

이 스타일은 멀티 스텝 양식 및 웹 사이트 Breadcrumb Navigation과 같은 웹 디자인에서 일반적입니다. 우리는 이러한 스타일을 이해하기 쉽기 위해 "밴딩"이라고 부릅니다.

많은 웹 요소와 마찬가지로 다양한 방식으로 이러한 줄무늬를 만들 수 있습니다! CSS 삼각형, SVG 배경 및 CSS 클립 경로 속성 사용과 같은 여러 가지 방법으로 데모 페이지를 만들었습니다.

HTML 구조

각 데모의 HTML 구조는 기본적으로 상위 요소를 포함하여 동일합니다.<nav></nav> 요소와 어린이 요소에 대한 링크.

<nav aria-label="breadcrumbs" role="navigation"> <a href="https://www.php.cn/link/3dc023ccc7e0bd23ce2d4427756fd03c">홈페이지</a>
  <a href="https://www.php.cn/link/3dc023ccc7e0bd23ce2d4427756fd03ccategories/articles/">블로그</a>
  <a aria-current="page" href="https://www.php.cn/link/3dc023ccc7e0bd23ce2d4427756fd03carticles/building-an-animated-sticky-header-with-custom-offset/">기사</a>
</nav>

A11Y 스타일 가이드에 따르면 이러한 요소는 접근성 표준을 준수해야합니다. 구성 요소를 설계 할 때는 접근성을 고려하고 처음에 접근성을 도입하는 것이 "접근성 추가 잊어 버리는 것"문제를 피하는 가장 좋은 방법입니다.

기본 스타일

이 유형의 스타일의 경우 요소 크기가 올바른지 확인해야합니다. 이를 위해 .ribbon 의 글꼴 크기를 정의합니다 (이러한 요소 "대역"이라고 부릅니다)은 요소를 감싸고 HILD 요소 (링크)의 EM 장치를 사용합니다.

 /* 랩핑 요소의 글꼴 크기 정의*/
.Ribbon {
  글꼴 크기 : 15px;
}

/* EM 장치를 사용하여 스트라이프 요소의 크기를 정의하십시오*/
.Ribbon__lement {
  글꼴 크기 : 1.5EM;
  문자 스페이스 : 0.01em;
  라인 높이 : 1.333em;
  패딩 : 0.667EM 0.667EM 0.667EM 1.333EM;
}

이 기술은 삼각형을 계산하기 위해 동일한 크기를 사용하기 때문에 각 스트립의 삼각형 모양 크기를 정의하는 데 유리합니다. 우리는 EM 장치를 사용하여 줄무늬 요소의 크기를 계산하기 때문에 래퍼 요소의 글꼴 크기를 재정의하여 모든 요소를 ​​조정할 수 있습니다.

우리는 그렇게 할 수 있기 때문에 레이아웃에 CSS 그리드를 사용해 봅시다. 더 넓은 범위의 브라우저 지원 접근법을 사용하여이를 수행 할 수 있지만 지원 요구에 따라 다릅니다.

4 개의 열을 정의합니다.

• 스트라이프 요소에는 3 개의 열이 사용됩니다
• 열은 간격 문제를 해결하는 데 사용됩니다. 오른쪽 화살표 모양은 스트립 어셈블리 외부에 배치되며 원래 레이아웃이 엉망이 될 수 있습니다.

 /* 포장 요소* CSS 그리드를 사용하지만 브라우저 지원 요구 사항을 충족해야합니다.
 * AutoPrefixer가 공급 업체 접두사 및 속성에 사용된다고 가정합니다.
 */

.Ribbon {
  디스플레이 : 그리드;
  그리드 갭 : 1px;
  그리드-템플릿-컬럼 : 반복 (자동 필, 1fr) 1em; /* 크기 문제를 해결하기 위해 좁은 열로 3 개의 스트라이프 요소를 자동으로 채우십시오*/
}

스트립 요소를 스트레칭하지 않으려면 메쉬를 다르게 정의 할 수 있습니다. 예를 들어, max-content 사용하여 컨텐츠 크기에 따라 열을 조정할 수 있습니다. (그러나 일부 주요 브라우저에서는 max-content 아직 지원되지 않습니다.)

 /* 최대 컨텐츠 크기에 따라 스트라이프 열을 조정하십시오*/
.Ribbon-- AUTO {
  그리드-템플릿-컬럼 : 반복 (3, max-content) 1em;
}

레이아웃을위한 여러 가지 방법이 있다고 생각합니다. 복잡한 계산없이 줄무늬 요소 사이의 정확한 간격을 정의하기 때문에이 접근법이 마음에 듭니다.

접근성은 ARIA 속성을 추가하는 것 이상입니다. 또한 색상 대비 및 가독성, 호버 및 포커스 상태를 추가합니다. 개요 스타일이 마음에 들지 않으면 Box-Shadow와 같은 다른 CSS 속성을 사용할 수 있습니다.

 /* 현재 링크 색상을 사용하지만 hover에 밑줄을 추가하십시오*/
.Ribbon__lement : 호버,
.Ribbon__lement : Active {
  색상 : 상속;
  텍스트 결정 : 밑줄;
}

/* 기본 개요 스타일을 지우고 내장 된 상자 그림자를 사용하여 초점 상태를 나타냅니다*/
.Ribbon__lement : Focus {
  Box -Shadow : inset 0 -3px 0 0 #343435;
  개요 : 없음;
}

독특한 삼각형 모양을 만듭니다

각 스트립 끝에서 삼각형을 정의 할 때 여러 가지 옵션이 있습니다. 우리는 할 수 있습니다 :

1. 의사 요소와 경계로 삼각형을 만듭니다
2. 의사 요소에 SVG 배경 이미지 사용
3. 인라인 SVG 이미지 사용
4. polygon() 함수를 사용하여 클립 경로를 만듭니다

각각을 파헤쳐 봅시다.

방법 1 : 국경 방법

먼저, 요소의 너비와 높이를 삼각형을 그리는 데 사용하는 의사 요소를 방해하지 않도록 요소의 너비와 높이를 0으로 설정해야합니다. 그런 다음 테두리를 사용하여 삼각형을 그려야합니다. 특히 배경색과 일치하는 단단한 왼쪽 테두리를 정의하여 나머지 스트립과 혼합됩니다. 다음으로 상단 및 하단 테두리를 정의하여 투명하게 설정합시다. 여기서 속임수는 테두리의 크기를 계산하는 것입니다.

스트라이프 요소의 내용 크기는 행 높은 값과 상단 및 하단 패딩입니다.

 <code>1.333em 0.667em 0.667em = 2.667em</code>

이것은 우리의 상단 및 하단 경계가 이것의 절반의 크기가되어야 함을 의미합니다. 남은 유일한 것은 요소를 구성 요소의 올바른 측면에 절대적으로 배치하는 것입니다.

 /* 왼쪽 화살*/
.Ribbon-- Alpha .Ribbon__lement : 전 {{
  /* 콘텐츠 크기 제로 만들기*/
  콘텐츠: '';
  높이 : 0;
  너비 : 0;

  /* 국경을 사용하여 의사 요소를 스트립 크기에 맞게 만듭니다*/
  국경-바닥 : 1.333em 고체 투명;
  왼쪽 경계 : 0.667EM 솔리드 #fff;
  테두리 : 1.333em 고체 투명;

  /* 요소를 줄무늬 요소의 왼쪽에 절대적으로 배치*/
  위치 : 절대;
  상단 : 0;
  하단 : 0;
  왼쪽 : 0;
}

/* 오른쪽 화살표*/
.Ribbon-- Alpha .Ribbon__lement : {이후 {
  /* 콘텐츠 크기 제로 만들기*/
  콘텐츠: '';
  높이 : 0;
  너비 : 0;

  /* 국경을 사용하여 의사 요소를 스트립 크기에 맞게 만듭니다*/
  국경-바닥 : 1.333em 고체 투명;
  왼쪽 경계 : 0.667EM 고체;
  테두리 : 1.333em 고체 투명;

  /* 요소를 스트라이프 요소의 오른쪽에 절대적으로 배치하고 외부로 밀어 넣습니다.
  위치 : 절대;
  상단 : 0;
  오른쪽 : 0;
  하단 : 0;
  -webkit-transform : translatex (0.667em);
  변환 : translatex (0.667EM);
}

오른쪽 삼각형은 스트립의 배경색과 일치해야하므로 각 스트립의 의사 요소에 올바른 테두리 색상을 추가하십시오.

 /* 첫 번째 요소의 오른쪽 화살표*/
.Ribbon-- Alpha .Ribbon__lement : nth-Child (1) : {이후 {
  경계-왼쪽 색 : #11d295;
}

/* 두 번째 요소의 오른쪽 화살표*/
.Ribbon-- Alpha .Ribbon__lement : nth-Child (2) : {이후 {
  경계-왼쪽 색 : #ef3675;
}

/* 세 번째 요소의 오른쪽 화살표*/
.Ribbon-- Alpha .Ribbon__lement : nth-Child (3) : {이후 {
  경계-왼쪽 색 : #4CD4E9;
}

그게 다야!

방법 2 : 배경 이미지 방법

배경 이미지를 사용하여 삼각형을 만들 수도 있습니다. 이를 위해서는 디자인과 일치하는 이미지를 만들어야합니다. 이는 약간 번거 롭지 만 여전히 가능합니다. SVG는 모든 해상도에서 매끄럽기 때문에 여기에서 사용할 것입니다.

Border Triangle 방법과 달리 의사 요소의 높이를 스트라이프 요소의 높이 (또는 100%)와 일치 시키려고합니다. 구성 요소의 너비는 테두리 삼각형의 왼쪽 경계 너비와 일치해야하며,이 경우 0.666666EM입니다. 그런 다음 흰색 삼각형을 왼쪽 삼각형의 배경 이미지로 사용하고 오른쪽 삼각형의 색상 삼각형 이미지를 사용해야합니다. 다시, 우리는 절대 포지셔닝을 사용하여 삼각형을 스트라이프 요소의 올바른쪽에 놓습니다.

 /* 왼쪽 화살*/
.Ribbon-- Beta .Ribbon__lement : 이전 {{
  /* 화살표 크기 정의*/
  콘텐츠: '';
  높이 : 100%;
  너비 : 0.666666EM;

  /* 배경색과 일치하는 배경 이미지 정의*/
  배경 이미지 : URL (데이터 : 이미지/SVG XML; Base64, phn2zybozwlnahq9ijqwiib2awv3qm94psiwidagmtagndaiihdpzhropsixmcigeg1sbnm9imh0dha6ly93d3d3cudzmub3jnlziwmdvmc3znibmcmmoc3znlvcmmecmmecmmecmmecti JZMZMIJ48CGF0ACBKPSJTNSAXNSAXNSAXNSAYMCAXMGGTNDB6IIBMAWXSLXJ1BGU9IMV2ZW5VZGQIIHRYYW5ZZM9YBT0IBWF0CMML4KDAGLTEGLTEGMCAYNSAYNSAYNSKILZ48L3N2ZZ4 =).
  배경 위치 : 중앙 왼쪽;
  배경 반복 : 비 반복;
  배경 크기 : 100%;

  /* 요소를 줄무늬 요소의 왼쪽에 절대적으로 배치*/
  위치 : 절대;
  하단 : 0;
  상단 : 0;
  왼쪽 : 0;
}

/* 오른쪽 화살표*/
.Ribbon-Beta .Ribbon__lement : {이후 {
  /* 화살표 크기 정의*/
  콘텐츠: '';
  높이 : 100%;
  너비 : 0.667EM;

  /* 배경 이미지 속성 정의*/
  배경 위치 : 중앙 왼쪽;
  배경 반복 : 비 반복;
  배경 크기 : 100%;

  /* 요소를 스트라이프 요소의 오른쪽에 절대적으로 배치하고 외부로 밀어 넣습니다.
  위치 : 절대;
  상단 : 0;
  오른쪽 : 0;
  하단 : 0;
  -webkit-transform : translatex (0.667em);
  변환 : translatex (0.667EM);
}

/* 첫 번째 요소의 배경색과 일치하는 배경 이미지 정의*/
.Ribbon-Beta .Ribbon__lement : nth-Child (1) : {이후 {
  배경 이미지 : URL (데이터 : 이미지/SVG XML; base64, phn2zybozwlnahq9ijqwiib2awv3qm94psiwidagmtagndaiihdpzhropsixicmcigeg1sbnm9imh0dha6ly93d3d3d3d3d3jmub3jnlziwmdavc3znijnijnijnijnij48cgf0acbkp sjtnsaxnsaymcaxmggtndb6iibmawxspsijmtfkmjk1iibmawxslxj1bgu9imv2zw5vzgqiihryyw5zzm9ybt0ibwf0cmml4kdagltegltegmcaynsaynsaynskilz48l3n2zz4 =)).
}

/* 두 번째 요소의 배경색과 일치하는 배경 이미지 정의*/
.Ribbon-- Beta .Ribbon__lement : nth-Child (2) : {이후 {
  배경 이미지 : URL (데이터 : 이미지/SVG XML; base64, phn2zybozwlnahq9ijqwiib2awv3qm94psiwidagmtagndaiihdpzhropsixicmcigeg1sbnm9imh0dha6ly93d3d3d3d3d3jmub3jnlziwmdavc3znijnijnijnijnij48cgf0acbkp sjtnsaxnsaymcaxmggtndb6iibmawxspsijzwyznjc1iibmawxslxj1bgu9imv2zw5vzgqiihryyw5zzm9ybt0ibwf0cmml4kdagltegltegmcaynsaynsaynskilz48l3n2zz4 =)).
}

/* 세 번째 요소의 배경색과 일치하는 배경 이미지 정의*/
.Ribbon-- Beta .Ribbon__lement : nth-Child (3) : {이후 {
  배경 이미지 : URL (데이터 : 이미지/SVG XML; base64, phn2zybozwlnahq9ijqwiib2awv3qm94psiwidagmtagndaiihdpzhropsixicmcigeg1sbnm9imh0dha6ly93d3d3d3d3d3jmub3jnlziwmdavc3znijnijnijnijnij48cgf0acbkp sjtnsaxnsaymcaxmggtndb6iibmawxspspijngngu5iibmawxslxj1bgu9imv2zw5vzgqiihryyw5zzm9ybt0ibwf0cmml4kdagltegltegmcaynsaynskilz48l3n2zz4 =).
}

그게 다야!

나머지는 진술이 조정되고 교체되며 원본 텍스트를 변경하지 않는 것을 제외하고는 원본 텍스트와 유사합니다. 공간 제한으로 인해 여기에서 반복하지 않을 것입니다. 나머지 부분을 계속 연구하려면 원본 텍스트를 참조하십시오.

위 내용은 오, 삼각형 빵 부스러기 리본을 만드는 많은 방법!의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!