단일 요소로 CSS 리본 모양을 만드는 방법

최신 CSS 팁을 사용하여 소량의 코드로 멋진 CSS 리본 모양을 만듭니다! 이 기사에서는 단일 요소 및 CSS 변수를 사용하여 다양한 리본 모양을 만드는 방법을 보여주고 고정 크기 또는 마법 번호가 필요하지 않고 아름다운 호버 애니메이션을 달성하는 방법을 보여줍니다.

키 포인트 :

최신 CSS 팁을 사용하면 고정 크기 나 매직 숫자가 필요하지 않고 단일 요소와 CSS 변수로 제어되는 CSS 리본 모양을 쉽게 만들 수 있습니다.

CSS 리본 모양을 만들려면 모양과 색상을 제어하는 ​​변수를 정의하고, 를 사용하여 원하는 모양을 자르고, 를 사용하여 리본의 접힌 부분을 만듭니다. CSS

단위 ( 및 CSS 변수와 함께 사용하여 우수한 호버 애니메이션을 생성 할 수 있습니다.

회전 CSS 리본 모양을 만드는 것은 새로운 삼각 함수와 CSS 변수를 사용하고 를 사용하고 기본 요소의 부분을 그라디언트 색상으로 자르고 주 요소 뒤의 부품을 유사 요소로 만듭니다.
이 기사는 접힌 리본과 로타리 리본의 두 가지 유형의 CSS 리본 모양을 만드는 심층적 인 방법을 모색합니다.
• clip-path box-shadow
접힌 CSS 리본 모양을 만듭니다 먼저 리본의 모양을 정의하는 변수를 정의합니다.
• lh line-height 다음으로 속성을 ​​주로 사용하십시오. 다음 그림은 사용할 다각형 모양을 보여줍니다. clip-path
내부 마진을 추가하여 텍스트 자르기를 피한 다음
• : 를 바릅니다. calc() CSS LH Unit
사용을 사용하십시오

단위는

값에 해당합니다. 단일 라인 텍스트를 사용하기 때문에

는 제어 높이를 설정하고

는 요소 높이와 동일합니다. 에서는이를 위해 이등변 삼각형의 모양을 절단해야합니다. 요소의 높이를 알아야합니다.

붕괴 된 섹션을 만들려면 여전히 를 사용하고 이전 다각형을 업데이트하십시오. 의 영리함은 요소의 경계의 "외부"내용을자를 수 있다는 것입니다.

를 추가함으로써 외부 클리핑 부분을 볼 수 있습니다.

update 4 개의 새로운 포인트를 포함하려면, 그 중 3 개는 요소 외부에 있습니다. clip-path 마지막으로, 그라디언트와 다른

를 추가하여 그림자 효과를 완료하십시오.

.ribbon {
  --r: 20px; /* 控制丝带的切口 */
  --s: 20px; /* 折叠部分的大小 */
  --c: #d81a14; /* 颜色 */
}

(길이가 너무 길지만 주요 이미지와 코드 스 니펫이 유지되므로 회전 리본의 호버 애니메이션 코드와 회전 리본의 세부 코드는 생략됩니다. 전체 코드는 Codepen에서 찾을 수 있습니다. 원본 텍스트에 표시됩니다.)

결론 box-shadow

이 기사는 CSS 변수 및 Trigonometric 함수와 같은 최신 CSS 기능을 탐색하여 Cool Ribbon 모양을 만들기 위해 결합합니다. 더 많은 예는 원래 링크의 전체 컬렉션을 참조하십시오.

위 내용은 단일 요소로 CSS 리본 모양을 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!