완전히 반응하는 CSS 접힌 리본

이 게시물에서는 하드코딩된 너비나 높이가 없는 완전히 반응하는 리본을 만들 것입니다. 크기와 위치는 콘텐츠에 따라 동적으로 조정되며 HTML이나 JS를 많이 사용하지 않을 것입니다. CSS 만!

코드 구조:

<div class="container" data-ribbon="Ribbon content"></div>

예, 데이터 속성으로 리본 컨텐츠가 있는 하나만div.

.container {
  --d:6px;  /* folded part */
  --c:blue; /* color */
  --f:16px; /* ribbon font-size */
  position: relative;
}
.container::before {
  content: attr(data-ribbon);
  font-size:var(--f);
  /* I : position & coloration */
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(29.29%, -100%) rotate(45deg);
  transform-origin: bottom left;
  padding: 5px 35px calc(var(--d) + 5px);
  background: linear-gradient(rgba(0,0,0,0.5) 0 0) bottom/100% var(--d) no-repeat var(--c);
  /* II : clipping */
  clip-path: polygon(0 0,100% 0,100% 100%,calc(100% - var(--d)) calc(100% - var(--d)),var(--d) calc(100% - var(--d)) , 0 100%);
  /* III : masking */
  -webkit-mask: 
      linear-gradient( 135deg, transparent calc(50% - var(--d)*0.707),#fff 0) bottom left,
      linear-gradient(-135deg, transparent calc(50% - var(--d)*0.707),#fff 0) bottom right;
  -webkit-mask-size:300vmax 300vmax;
  -webkit-mask-composite: destination-in;
   mask-composite: intersect;
}

위치 및 색상

두 개의 레이어를 사용하여 요소를 채색합니다. 기본 색상과 접힌 부분의 하단에 검정색 오버레이. 그런 다음 오른쪽 상단 모서리에 배치합니다.



이제 올바른 배치를 위해 변환을 적용하고 반응성의 마법이 여기에 있습니다(네, 29.29% 값입니다)



이해하기 쉬운 일부 기하학29.29%


위에서 우리는 다음 공식을 얻습니다.
cos(45deg) = a/w 여기서 w는 요소 너비입니다.
x = w - a = w - w*cos(45deg) = w*(1-cos(45deg) = w*(1-0.70710678)
그래서 x = 0,29289322*w ~ 29.29%

깎는

clip-path를 사용하여 하단에 접힌 부분을 만듭니다.

  clip-path: 
   polygon(
       0 0, /* a */
       100% 0, /* b */
       100% 100%, /* c */
       calc(100% - var(--d)) calc(100% - var(--d)), /* x */
       var(--d) calc(100% - var(--d)), /* y */
       0 100% /* d */
   );

마스킹

마지막 터치는 두 개의 마스크 레이어를 사용하여 모서리를 자르는 것입니다. 여기서 트릭은 내부에 진단 기울기가 있는 큰 사각형을 고려하고 접힌 부분을 고려하여 50%에서 자릅니다.

한 모서리에 대한 설명을 위한 그림:



다른 모서리에 대해서도 동일한 작업을 수행하고 mask-composite: intersect를 사용하여 두 마스크 레이어의 교차점을 고려합니다.

그게 다야!

변수와 콘텐츠를 조정하여 리본을 제어하기만 하면 됩니다. 변형과 위치를 약간 조정하여 왼쪽으로 쉽게 이동할 수 있습니다.

.left::before {
  left:0;
  right:auto;
  transform: translate(-29.29%, -100%) rotate(-45deg);
  transform-origin: bottom right;
}

투명한 테두리를 추가하고 배경 클립을 사용하여 도형 주위에 나타나는 잘못된 윤곽선을 방지합니다.