일반적인 CSS3 불규칙한 모양을 만드는 방법-프런트엔드 Q&A-php.cn

일반적인 CSS3 불규칙한 모양을 만드는 방법

PHPz

풀어 주다： 2023-04-13 11:38:20

원래의

1334명이 탐색했습니다.

CSS3 불규칙 그래픽 디자인은 현대 웹페이지 디자인에서 점점 더 대중화되고 있습니다. 불규칙한 디자인을 만드는 것이 점점 쉬워지고 있으며 JavaScript나 백엔드 스크립트를 사용하지 않고도 이 작업을 수행할 수 있습니다. 이 구현을 CSS3 불규칙성이라고 합니다.

CSS3 Irregular의 장점은 유연성과 반응성입니다. 다양한 장치 해상도에 대해 완벽하게 반응하는 페이지를 만들 수 있습니다. 또한, 불규칙한 디자인이 훌륭하면 웹사이트에 독특한 스타일을 더할 수 있습니다.

CSS3 불규칙한 모양은 만들기 쉽습니다. 원하는 모양을 자르고 주위에 색상을 추가하거나 배경 이미지를 사용하면 더욱 매력적으로 보일 수 있습니다.

이제 일반적인 CSS3 불규칙한 모양을 만드는 방법을 살펴보겠습니다.

Triangle

삼각형은 CSS3 불규칙 그래픽의 가장 기본적인 도형 중 하나입니다. 다음 코드로 만들 수 있습니다:

.triangle {
  width: 0;
  height: 0;
  border-top: 50px solid #007bff;
  border-left: 50px solid transparent;
}

로그인 후 복사

Trapezoid

사다리꼴도 삼각형과 비슷한 단순한 모양입니다. 그러나 삼각형과 달리 사다리꼴은 짧은 변 두 개와 긴 변 두 개를 가지고 있습니다.

.trapezoid {
  height: 0;
  width: 100px;
  border-top: 50px solid #007bff;
  border-bottom: 50px solid #007bff;
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
}

로그인 후 복사

평행사변형

평행사변형은 다음 코드로 만들 수 있는 단순한 불규칙 모양입니다.

.parallelogram {
  width: 150px;
  height: 100px;
  transform: skew(20deg);
  background-color: #007bff;
}

로그인 후 복사

타원형

타원형은 다음 코드로 만들 수 있는 또 다른 CSS3 불규칙 모양입니다. 만들기:

.ellipse {
  width: 100px;
  height: 50px;
  border-radius: 50%;
  background-color: #007bff;
}

로그인 후 복사

Polygon

다음 코드를 사용하여 다섯개 별을 만들 수 있습니다.

.star {
  height: 0;
  width: 0;
  border-right: 50px solid transparent;
  border-bottom: 50px solid #007bff;
  border-left: 50px solid transparent;
  transform: rotate(35deg);
}

.star:before {
  height: 0;
  width: 0;
  margin: -50px 0 0 -25px;
  content: "";
  position: absolute;
  border-right: 25px solid transparent;
  border-bottom: 30px solid #fff;
  border-left: 25px solid transparent;
  transform: rotate(-35deg);
}

.star:after {
  width: 0;
  height: 0;
  margin: -20px 0 0 -10px;
  content: "";
  position: absolute;
  border-right: 10px solid transparent;
  border-bottom: 12px solid #007bff;
  border-left: 10px solid transparent;
  transform: rotate(35deg);
}

로그인 후 복사

Summary

CSS3 불규칙한 그래픽 디자인은 어렵지 않습니다. 올바른 도구와 몇 가지 기본 지식만 있으면 간단한 모양을 쉽게 만들 수 있습니다. 웹 페이지 디자인에서 불규칙한 그래픽 디자인은 페이지에 독특한 스타일을 추가하여 웹 사이트에 더 나은 사용자 경험을 제공할 수 있습니다.

위 내용은 일반적인 CSS3 불규칙한 모양을 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!