CSS의 클립 경로 속성을 사용하여 복잡한 카드 스타일을 만드는 방법은 무엇입니까?

CSS를 영리하게 사용하여 개인화 된 카드를 만듭니다 : 기존 모양의 한계를 뚫습니다.

웹 디자인에서 카드는 일반적으로 사용되는 레이아웃 요소입니다. 이 기사는 CSS, 특히 clip-path 속성을 사용하여 고유 한 카드 스타일을 만들고 기존의 방법으로 달성하기 어려운 복잡한 모양 설계 문제를 해결하는 방법을 심층적으로 탐색합니다.

디자인 도전 : 불규칙한 카드 모양

많은 디자이너 들이이 상황에 직면 할 것입니다. 디자인 드래프트의 카드 모양은 불규칙하고 간단한 CSS 속성으로 구현하기가 어렵습니다. 이 기사는 이러한 복잡한 카드 모양을 쉽게 구현하는 데 도움이되는 솔루션을 제공합니다.

솔루션 : clip-path 속성 및 경로 구문

clip-path 속성은 CSS의 강력한 도구로 다양한 모양으로 요소를 클립 할 수 있습니다. Path Syntax와 결합하여 카드 모양을 정확하게 제어 할 수 있습니다.

경로 구문에는 다음과 같은 일련의 명령이 포함됩니다.

• M : 지정된 좌표로 이동하십시오
• L : 지정된 좌표에 선을 그립니다
• A : 타원형 아크를 그립니다
• Z : 경로를 닫습니다

다음은 clip-path 사용하여 불규칙한 카드를 만드는 방법을 보여주는 예입니다.

(여기에 렌더링 사진이 있어야합니다)

다음은 전체 HTML 및 CSS 코드입니다.

 


  <meta charset="utf-8">
  <style>
    body {
      background-color: #e9e6e6;
    }

    .container {
      position: relative;
      width: 300px;
      height: 150px;
    }

    .card {
      width: 100%;
      height: 100%;
      border-radius: 10px;
      background-color: white;
      clip-path: path("M 215, 8 A 10 10 90 0 0 205 0 L 0 0 L 0 150 L 300 150 L 300 40 A 10 10 90 0 0 290 30 L 230 30 A 10 10 90 0 1 220 22 z");
      z-index: 1;
      position: relative;
    }

    .tag {
      width: 90px;
      height: 30px;
      border-top-right-radius: 10px;
      background-color: red;
      color: white;
      position: absolute;
      right: 0;
      top: 5px;
      z-index: 0;
      text-align: center;
    }

    .title {
      font-size: 18px;
      font-weight: bold;
      padding: 10px;
    }

    .content {
      padding: 10px;
    }
  </style>


  <div class="container">
    <div class="card">
      <div class="title">제품 생산 보고서</div>
      <div class="content">콘텐츠</div>
    </div>
    <div class="tag">완료되지 않았습니다</div>
  </div>

이 코드는 clip-path 속성과 정확한 경로 정의를 통해 오목하고 둥근 모서리가있는 불규칙한 카드를 생성하고 제목, 내용 및 상태 태그를 추가합니다. 실제 설계에 따라 경로 명령을 조정하여 다양한 복잡한 카드 모양을 달성 할 수 있습니다.

위 내용은 CSS의 클립 경로 속성을 사용하여 복잡한 카드 스타일을 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!