CSS를 사용하여 모서리가 접힌 반응형 리본을 만드는 방법은 무엇입니까?

DDD
풀어 주다: 2024-10-31 02:33:02
원래의
954명이 탐색했습니다.

How to Create a Responsive Ribbon with a Folded Corner using CSS?

CSS를 사용하여 모서리가 접힌 반응형 리본 만들기

접힌 모서리가 있는 CSS 리본을 만드는 방법은 여러 가지가 있습니다. 한 가지 접근 방식은 다음과 같이 HTML과 CSS로 구현하는 것입니다.

<code class="css">.container {
  width: 200px;
  height: 200px;
  position: relative;
  margin: 20px;
  overflow: hidden;
}

.box {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0.8; /* for demo purpose */
}

.stack-top {
  height: 30px;
  z-index: 9;
  margin: 40px; /* for demo purpose */
  transform: rotateY(0deg) rotate(45deg); /* needs Y at 0 deg to behave properly*/
  transition: transform 2s;
  color: #fff;
}</code>
로그인 후 복사
<code class="html"><div class="container">
  <div class="box" style="background: #fffff3;"></div>
  <div class="box stack-top" style="background: #242424;">      1Month</div>
</div></code>
로그인 후 복사

이 방법은 대각선 모양의 기본 리본을 만듭니다. 그러나 모양과 응답성에 있어 더 큰 유연성이 필요한 경우 https://css-generators.com/ribbon-shapes/와 같이 사전 구축된 생성기를 사용하는 것이 좋습니다. 이러한 생성기는 반응형 디자인 속성으로 다양한 리본 모양을 생성하기 위한 사용자 정의 가능한 옵션을 제공합니다.

위 내용은 CSS를 사용하여 모서리가 접힌 반응형 리본을 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿