CSS 모양

재미있는 CSS 모양을 만들어 봅시다! 모든 코드에 대해 내 Codepen을 따르십시오. 해보자.

직사각형 및 사각형

우리의 모든 모양은 div에 래핑됩니다. 기본적으로 div는 너비 및 높이 속성에 따라 정사각형 또는 직사각형이기 때문에 가장 기본적인 모양은 정사각형과 직사각형입니다. 따라서 정사각형은 너비와 높이가 동일하지만 직사각형은 그렇지 않습니다.

.rectangle {
  width: 2rem;
  height: 4rem;
  background-color: violet;
}

.square {
  width: 5rem;
  height: 5rem;
  background-color: lime;
}

알림 :우리는 root font-size를 기반으로 하고 쉬운 scale을 허용하는 rem을 사용합니다. 이것은 브라우저의 기본값(보통 16px)입니다. font-size를 20px로 설정했으므로 2rem은 40px입니다.

원

프로필 이미지를 위한 원을 만들어 보겠습니다. 원을 만드는 것은 정사각형과 비슷하지만 border-radius를 지정해야 합니다. 모서리를 둥글게 하려면 50%여야 합니다. 타원을 원하면 직사각형과 유사한 형태로 너비/높이를 수정합니다.

프로필 이미지를 만들어 봅시다:

.profile-image {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-image: url("https://user-images.githubusercontent.com/15071636/91342237-57ad9a00-e7a0-11ea-97bc-606a5998b29a.jpg");
  background-position: center center;
  background-size: cover;
}

참고 :배경 속성은 이미지를 가져오고, 크기를 조정하고, 중앙에 배치하는 것입니다.

평사변형

평행사변형도 만들 수 있습니다. 이 모양은 멋진 텍스트 효과를 추가할 때 유용할 수 있습니다. 여기에서는 변형 속성을 사용하고 기울이기 값을 사용하여 모양(및 내부의 모든 것)을 20도 또는 -20도의 평행사변형으로 변형합니다.

참가자의 81%는 부트캠프에 참석한 후 기술 직업 전망에 대해 더 자신감을 느꼈다고 말했습니다. 지금 부트캠프에 참여하십시오.

부트캠프 졸업생은 부트캠프 시작부터 첫 직장을 찾는 데까지 6개월도 채 걸리지 않았습니다.

.parallelogram {
  color: ivory;
  width: 6rem;
  height: 1.5rem;
  transform: skew(-20deg);
  background: indianred;
}

멋져보이네요 😎

기타 모양

이제 우리는 CSS 모양과 그 용도에 대해 약간의 지식을 얻었으므로 다른 모양을 살펴볼 수 있습니다. 내 Codepen에서 모두 재생할 수 있습니다.

.triangle {
  width: 0;
  height: 0;
  border-left: 2rem solid transparent;
  border-right: 2rem solid transparent;
  border-bottom: 5rem solid hotpink;
}

하트를 하는 방법에는 여러 가지가 있고 온라인에서 많은 반복 작업을 찾을 수 있지만 이 방법은 매우 간단합니다.

.heart {
  width: 10rem;
  background: radial-gradient(circle at 60% 65%, goldenrod 64%, transparent 65%)
      top left, radial-gradient(
        circle at 40% 65%,
        goldenrod 64%,
        transparent 65%
      ) top right,
    linear-gradient(to bottom left, goldenrod 43%, transparent 43%) bottom left,
    linear-gradient(to bottom right, goldenrod 43%, transparent 43%) bottom right;
  background-size: 50% 50%;
  background-repeat: no-repeat;
}

.heart::before {
  content: "";
  display: block;
  padding-top: 100%;
}

계속해서 백분율로 재생하고 색상을 변경하십시오. 심장이 어떻게 만들어지는지 볼 수 있습니다. 따라서 ::before 및 ::after 유사 요소를 사용하여 멋진 모양을 만드는 방법을 알 수 있습니다.

또한 polygon() 기능을 통해 다른 모양을 지정할 수 있어 한계가 확장됩니다.

.letter-t {
  width: 5rem;
  height: 5rem;
  margin: 0 1rem;
  shape-outside: polygon(
    0 0,
    100% 0,
    100% 20%,
    60% 20%,
    60% 100%,
    40% 100%,
    40% 20%,
    0 20%
  );
  clip-path: polygon(
    0 0,
    100% 0,
    100% 20%,
    60% 20%,
    60% 100%,
    40% 80%,
    40% 20%,
    10% 20%
  );
  background: navajowhite;
}

이 클립 경로 작성기를 확인하십시오. , 다양한 모양에 대한 코드를 생성할 멋진 도구입니다!