CSS의 크리스마스 트리 세 그루🎄

나는 정말 CSS에서 크리스마스 트리를 만들고 싶었다. 나는 삼각형의 모양을 접었다. 그러나 나중에 나는 정말 그늘에 걸렸다.
거봐, 난 모든 걸 몰라...
트위터에 도움을 요청하기로 하고 다음과 같은 트윗을 올렸다.

크리스 본거스🤓💻⚡️

도움이 필요해!!🚨CSS 아트히어로를 찾아라!나는 빈 요소에 테두리를 사용해서 이 삼각형을 만들었는데, 어떻게 착색 층을 추가합니까? (예를 들어 검은 펜 그림 참조)너비/높이가 0이기 때문에 오버플로우를 사용할 수 없습니다.만년필: codepen.io/rebelchris/pen…
2020년 12월 2일 오전 05:51
이것으로 나는,, 그리고 멋진 생각을 얻었다.
그래서 이제 CSS로 크리스마스 트리를 만드는 세 가지 방법을 배웠어요.
그것들을 어떻게 만드는지에 관한 이 글을 보아라.

카탈로그

CSS Clip-path Christmas tree

CSS Pseudo Christmas tree

CSS Border Christmas tree

Demo

CSS 클립 트리

첫 번째 방법은 멋있다.그것은 하나의 clip-path를 사용하여 원형에서 공제합니다!(이것은 경계 해결 방안처럼 보이지만 더 간단하다)
이 해결 방안에 대해 우리는 단독 음영층을 사용하는데, 이것은 z 인덱스로 아래로 밀릴 것이다.
이 솔루션의 HTML:

<div class="clip-tree">
  <div class="shadow"></div>
  <div class="layer"></div>
  <div class="shadow"></div>
  <div class="layer"></div>
  <div class="layer"></div>
</div>

이제 신기한 일이 일어나도록 CSS를 추가합시다.
우리는 먼저 나무 자체가 상대적인 원소라는 것을 설명한다.

.clip-tree {
  position: relative;
  margin-top: 20px;
}

이제 녹색 레이어부터 시작하겠습니다.

.clip-tree .layer {
  position: absolute;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: green;
  clip-path: polygon(50% 5%, 100% 85%, 100% 100%, 0 100%, 0 85%);
}

보시다시피, 우리는 정사각형을 만들고, 경계 반경을 사용하면, 그것은 원으로 변할 것이다.
그런 다음 원하는 모양으로 설정된 클립 경로를 추가합니다.
각 단계를 보여 주려면 다음 그림을 보십시오.

그런 다음 섀도우 레이어를 추가합니다.

.clip-tree .shadow {
  position: absolute;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: black;
  clip-path: polygon(50% 0%, 0% 110%, 95% 100%);
  margin-top: 20px;
  margin-left: 10px;
}

이것은 같은 설정이지만, 우리는 약간 작은 모양을 사용해서 그것을 검은색으로 만들었다.
이제 각 계층을 포지셔닝해야 합니다.

.clip-tree div:nth-child(1) {
  transform: translateY(5px);
  z-index: 3;
}
.clip-tree div:nth-child(2) {
  transform: translateY(0);
  z-index: 3;
}
.clip-tree div:nth-child(3) {
  transform: translateY(40px);
  z-index: 2;
}
.clip-tree div:nth-child(4) {
  transform: translateY(35px);
  z-index: 2;
}
.clip-tree div:nth-child(5) {
  transform: translateY(70px);
  z-index: 1;
}

보시다시피 맨 위에 있는 층은 높은 z지수와 낮은 평이가 있고 평이는 층을 아래로 움직인다.
마지막으로 우리는 나무에 별을 하나 더 넣었다

.clip-tree:before {
  content: '⭐️';
  position: absolute;
  left: 42px;
  z-index: 10;
  top: -9px;
}

결과:

나는 이 방법을 매우 좋아한다. 왜냐하면 그것은 매우 깨끗하고, 완전히 백분율에 기초한 상황에서도 확장할 수 있기 때문이다.
나에게 있어서 가장 어려운 부분은 편집 경로의 실제 기능을 이해하는 것이다.

Note: There is a super cool clip-path generating tool: Clippy

가짜 크리스마스 트리

또 다른 선택은 위조 요소를 사용하는 것이다. 우리는 HTML 요소를 조금 줄였지만, 내가 발견한 이 버전을 확장하는 것은 더욱 까다로울 것이다.HTML 구조는 다음과 같습니다.

<div class="pseudo-tree">
  <div class="layer"></div>
  <div class="layer"></div>
  <div class="layer"></div>
</div>

이전과 마찬가지로 나무 자체는 상대적으로 위치를 정하는 요소이다.

.pseudo-tree {
  position: relative;
}

각 레이어는 절대 위치 요소입니다.

.pseudo-tree .layer {
  position: absolute;
  left: 0px;
  z-index: 2;
}

그리고 우리는 :after pseudo-element로 녹색층을 만든다.

.pseudo-tree .layer:after {
  content: ' ';
  display: block;
  width: 0;
  height: 0;
  border-left: 60px solid transparent;
  border-right: 60px solid transparent;
  border-bottom: 100px solid green;
  border-radius: 50%;
  position: relative;
  z-index: 2;
}

여기서 보듯이, 우리는 경계 해결 방안을 사용하여 모양을 만든다.
기본적으로 형상은 삼각형이다. 경계 반경 때문에 밑부분 드릴이 구부러질 것이다.
이러한 단계를 보여 주려면 다음과 같이 하십시오.

보시다시피 첫 번째 단계는 왼쪽 경계, 두 번째 단계는 좌우 경계, 마지막 단계는 경계 반경입니다.
이제 :before를 사용하여 음영처리된 레이어를 생성해야 합니다.

.pseudo-tree .layer:before {
  content: ' ';
  display: block;
  border-left: 60px solid transparent;
  border-right: 60px solid transparent;
  border-bottom: 100px solid black;
  border-radius: 100%;
  position: absolute;
  top: 1.1rem;
  left: 0;
  z-index: 1;
  transform: scale(0.74);
}

뒤쪽과 마찬가지로 검은색 테두리를 사용해 꼭대기에서 약간 벗어난 위치에 놓았다.우리는 또한 transform를 사용하여 그것을 좀 축소한다.
우리는 각 층에 약간의 공간과 등급이 내려간 z지수를 확보해야 한다.

.pseudo-tree .layer:nth-child(1) {
  top: 0px;
  z-index: 9;
}
.pseudo-tree .layer:nth-child(2) {
  top: 30px;
  z-index: 8;
}
.pseudo-tree .layer:nth-child(3) {
  top: 60px;
  z-index: 7;
}

이제 마지막 레이어의 섀도우를 제거합니다.

.pseudo-tree .layer:last-child:before {
  display: none;
}

우리는 그 위에 별 하나를 놓을 수 있다.

.pseudo-tree:before {
  content: '⭐️';
  position: absolute;
  left: 52px;
  z-index: 10;
  top: -13px;
}

이로 인해 다음과 같은 상황이 발생합니다.

이 방법은 나에게 있어서 가장 간단하고 깨끗하다HTML. 나는 위원소를 좋아한다.
여기서 더 어려운 것은 그것을 완전히 신축시킬 수 있도록 하는 것이다.백분율을 계산하기가 매우 어렵다.

Note: There is a cool tool to generate certain shapes in CSS called the CSS Shapes generator.

CSS 테두리 크리스마스 트리

마지막 해결 방안은 두 가지를 혼합해서 사용하는 것이다pseudo-elements. 그러나 이런 상황에서 우리가 필요로 하지 않는 것을 숨긴다!
우선 다음과 같은 사항이 필요합니다HTML.

<div class="border-tree">
  <div class="layer">
    <div class="cut"></div>
  </div>
  <div class="layer">
    <div class="cut"></div>
  </div>
  <div class="layer">
    <div class="cut"></div>
  </div>
</div>

이제 우리는 먼저 나무의 CSS부터 시작한다.

.border-tree {
  position: relative;
  box-sizing: border-box;
}

이것은 또 하나의 상대 트리이다. 우리는 이 해결 방안에 테두리를 사용했기 때문에, 나는 그것들을 확장하기 위해 box-sizing: border-box 를 추가했다.
이제 우리는 절대적인 위치를 사용할 것이다. 여기서 우리는 각 층의 크기를 정의할 것이다.

.border-tree .layer {
  width: 100px;
  height: 100px;
  position: absolute;
  z-index: 9;
}

층 안에 우리는 절단 원소가 있다.이것이 바로 실제 위치의 정의다.
우리는 이곳에서 상반된 일을 했다. 우리는 실제로 테두리를 사용하여 주요 원소를 착색했다.
그런 다음 배경은 검은색 그림자가 됩니다.

.border-tree .layer .cut {
  width: 100%;
  height: 100%;
  background: black;
  border-radius: 50%;
  border: 16px solid green;
  box-sizing: border-box;
}

그리고 우리는 다시 :before와 :after 위조 요소를 사용하여 흰색 직사각형을 추가하여 삼각형을 잘라냅니다!
단계별 보기(앞쪽은 빨간색, 뒤쪽은 파란색)

이러한 전후 위조 요소는 다음과 같은 코드CSS로 구축되었다.

.border-tree .layer .cut:before {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  background: #fff;
  opacity: 1;
  z-index: 300;
  transform: rotate(-45deg);
  top: -35%;
  left: 35%;
}
.border-tree .layer .cut:after {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  background: #fff;
  opacity: 1;
  z-index: 300;
  transform: rotate(45deg);
  top: 0%;
  left: -70%;
}

보시다시피 정사각형입니다. 흰색 배경이 있습니다. 우리는 회전하고 위치를 정합니다.
그런 다음 첫 번째 레이어에 검은색 배경이 없는지 확인해야 합니다. 첫 번째 레이어는 전체 녹색 레이어이기 때문입니다.

.border-tree .layer:first-child .cut {
  background: green;
}

이 방법의 마지막 부분은 각 층을 정확하게 포지셔닝하는 것이다.

.border-tree .layer:nth-child(2) {
  top: 20px;
  z-index: 8;
}
.border-tree .layer:nth-child(3) {
  top: 40px;
  z-index: 7;
}

마찬가지로 이 하나에 대해 우리는 꼭대기에 별 하나를 놓을 것이다.

.border-tree:before {
  content: '⭐️';
  position: absolute;
  left: 42px;
  z-index: 10;
  top: 36px;
}

이 나무의 결과는 다음과 같다.

이런 방법은 나의 첫 번째 방법이며, 나는 가장 경솔한 해결 방안이라고 생각한다.단점은 원소의 앞뒤가 항상 거기에 있고 페이지의 다른 원소와 중첩될 수 있다는 것이다.
놀기는 멋있지만 가장 안정적인 해결 방안은 아니다.

데모🎄

나는 이 세 가지 기술을 보여주기 위해 코드 펜을 만들었는데, 너는 여기서 찾을 수 있다.
나는 네가 이 글을 좋아하길 바란다. 그리고 CSS에서 특정한 형상을 어떻게 만드는지에 관한 새로운 지식을 배웠다.
개인적으로 삼각형은 만들기 어려운데, 특히 둥근 삼각형은 여전히 이상하다.

읽어주셔서 감사합니다. 연결해 드리겠습니다.

제 블로그를 읽어주셔서 감사합니다.내 이메일 시사 통신을 구독하고 Facebook 또는

Reference

이 문제에 관하여(CSS의 크리스마스 트리 세 그루🎄), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/dailydevtips1/three-christmas-trees-in-css-1e0h

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)