일반 CSS 3가지 방법

This is episode #22 in a series examining modern CSS solutions to problems I've been solving over the last 13+ years of being a frontend developer. Visit ModernCSS.dev to view the whole series and additional resources.

현대 CSS, 그리고 현대 브라우저 지원 - 순수하고 기본적인 CSS 모양을 만드는 세 가지 우수한 방법을 제공합니다.이 자습서에서는 다음과 같은 방법으로 CSS 삼각형을 만드는 방법을 연구합니다.

경계

선형 그래디언트

clip-path

메서드 1: 경계

이것은 내가 배운 첫 번째 CSS 삼각형을 만드는 기교이며, 그것은 여전히 믿을 만한 예비 도구이다.
제로 너비와 제로 높이 요소를 지정하고 제공된 모든 값border을 직접 교차시키는 것은 원소의 유일한 가시적인 표시이다.우리는 이 교점을 이용하여 삼각형을 만들 수 있다.
작동 방식을 설명하기 위해 각 면에 다양한 테두리 색상을 제공합니다.

.triangle {
  border: 10px solid blue;
  border-right-color: red;
  border-bottom-color: black;
  border-left-color: green;
}

이것은 다음과 같은 결과를 낳았다. 우리는 이미 기본적으로 4개의 삼각형 형상을 실현한 것을 볼 수 있다.

단일 삼각형으로 만들기 위해서는 먼저 삼각형이 가리키는 방향을 결정합니다.따라서 '재생' 아이콘과 같이 오른쪽을 가리키려면 왼쪽의 테두리를 보이게 하려고 합니다.그런 다음 다른 테두리의 색상을 다음과 같이 transparent로 설정합니다.

.triangle {
  border: 10px solid transparent;
  border-left-color: blue;
}

다음 프레젠테이션 이미지에서 변경 사항을 논의할 수 있도록 빨간색 outline 을 추가했습니다.

우리가 할 수 있는 개선 사항은 요소의 전체 너비에 포함되지 않도록 오른쪽 테두리의 너비를 삭제하는 것이다.우리는 삼각형의 시각적 효과를 늘리기 위해 윗부분과 밑부분에 유일한 값을 설정할 수도 있다.다음은 이러한 결과를 실현하는 간단한 방법이다.

.triangle {
  border-style: solid;
  border-color: transparent;
  /* top | right | bottom | left */
  border-width: 7px 0 7px 10px;
  border-left-color: blue;
}

다음 그림에서 보듯이 솔리드하고 투명한 테두리를 먼저 지정합니다.그런 다음 위쪽과 아래쪽의 값이 왼쪽보다 작도록 폭을 정의하여 세로 비율을 조정하고 늘어진 삼각형을 렌더링합니다.

따라서 삼각형을 다른 방향, 예를 들어 위로 가리키려면 밑의 테두리에서 색 값을 얻을 수 있도록 값을 씻고 윗부분의 테두리를 0으로 설정하면 된다.

.triangle {
  border-style: solid;
  border-color: transparent;
  /* top | right | bottom | left */
  border-width: 0 7px 10px 7px;
  border-bottom-color: blue;
}

결과:

삼각형에 있어서 경계는 매우 효과적이지만 더 많은 요소와 관련되지 않으면 이 모양 밖으로 뻗을 수 없다.이것이 바로 우리의 다음 두 가지 구조 방법이다.

방법2: 선형 경사도

CSS 그래디언트는 background-image 값으로 생성됩니다.
먼저, 원하는 경우 상자 크기를 정의하고 방지background-repeat를 통해 다음과 같은 조치를 취할 수 있습니다.

.triangle {
  width: 8em;
  height: 10em;
  background-repeat: no-repeat;
  /* Optional - helping us see the bounding box */
  outline: 1px solid red;
}

다음에 우리는 첫 번째 사다리를 추가할 것이다.이것은 원소의 절반이 파란색인 외관을 만들 것입니다. 왜냐하면 우리는 파란색과 투명도 값 사이에 50%의 경지점을 만들었기 때문입니다.

background-image: linear-gradient(45deg, blue 50%, rgba(255,255,255,0) 50%);

지금 만약 우리의 원소가 정사각형이라면, 이것은 한 각에서 다른 각으로 보이지만, 우리는 결국 이전과 약간 다른 종횡비를 원한다.

우리의 목표는 경계 방법을 사용할 때의 외관과 같은 삼각형을 만드는 것이다.이를 위해 우리는 background-size와 background-position의 값을 조정해야 한다.
첫 번째 조정은 변경background-size이다.요컨대 첫 번째 값은 너비이고 두 번째 값은 높이다.우리는 삼각형이 100%의 폭을 허용하지만 50%의 높이만 허용하기를 원하기 때문에 다음과 같은 내용을 추가합니다.

background-size: 100% 50%;

이전linear-gradient에는 다음과 같은 결과가 있었습니다.

그래디언트45deg 각도 때문에 모양이 좀 이상해 보여요.우리는 삼각형의 꼭대기가 경계 상자의 왼쪽 상단에서 오른쪽 중간으로 보이도록 각도를 조정해야 한다.
나는 수학 마법사가 아니기 때문에 정확한 값을 찾기 위해 DevTools를 사용해야 한다😉linear-gradient 값을 다음 값으로 업데이트합니다.

linear-gradient(32deg, blue 50%, rgba(255,255,255,0) 50%);

다음은 우리의 진전이다. 기술적으로는 삼각형이지만 우리가 원하는 완전한 외관은 아니다.

경계 기교에 대해 우리는 교차점에 의존하여 모양을 만들어야 한다linear-gradient에 대해 우리는 여러 배경을 추가하는 능력을 이용하여 층을 나누는 효과를 실현하고 완전한 삼각형을 실현해야 한다.
따라서 우리는 linear-gradient를 복제하고 그 도치를 업데이트하여 첫 번째 거울 모양으로 만들 것이다. 왜냐하면 그것은 그 아래에 있기 때문이다.이로 인해 전체background-image가 다음과 같이 정의됩니다.

background-image: 
  linear-gradient(32deg, blue 50%, rgba(255,255,255,0) 50%),
  linear-gradient(148deg, blue 50%, rgba(255,255,255,0) 50%);

그러나--우리는 아직 효과를 완전히 완성하지 못했다. 진도도에서 알 수 있듯이

겹치는 이유는 두 개의 점차적인 기본 위치가 0 0--즉 top left이기 때문이다.이것은 우리의 원시적인 사다리에 있어서 매우 좋지만, 우리는 두 번째 사다리를 조정해야 한다.
이를 위해서는 background-position에 여러 값을 설정해야 합니다.순서는 background-image와 같습니다.

background-position: top left, bottom left;

이제 우리는 우리가 원하는 결과를 얻었다.

이런 방법의 단점은 도수를 다시 계산하지 않는 상황에서 종횡비를 바꾸는 것이 상당히 원활하지 않다는 것이다.
그러나 CSS 그래디언트는 더 많은 모양을 만들 수 있습니다. 특히 층을 나누어 효과를 만들 수 있기 때문입니다.

For a master class in CSS gradients for shapes and full illustrations, check out A Single Div by Lynn Fisher

메서드 3: 클립 경로

마지막 방법은 가장 섬세하고 확장 가능한 것이다.현재는 slightly lagging in support이기 때문에 반드시 우리 자신의 분석을 검사하여 이것이 받아들일 수 있는 해결 방안인지 확인해야 한다.
다음은 우리 원소의 시작점, 즉 장방체 사이즈와 abackground-color입니다.

.triangle {
  width: 16px;
  height: 20px;
  background-color: blue;
}

clip-path는 다각형 모양(또는 원 또는 타원)을 그려 요소에 배치하는 개념입니다.브라우저는 실제로 clip-path 이외의 영역을 그리지 않으므로 모양새를 clip-path 경계까지 "잘랐습니다.

To illustrate this more, and to generate your desired clip-path definition, check out the online generator: Clippy

문법이 더 적응하기 어려울 수 있기 때문에 위에서 언급한 생성기를 사용하여 경로를 만드는 것을 절대 권장합니다.
우리의 목적에 따라 여기에는 오른쪽을 가리키는 삼각형이 하나 있다.

clip-path: polygon(0 0, 0% 100%, 100% 50%);

clip-path를 사용하여 경로를 따라 배치되는 각 점에 대한 좌표를 정의할 수 있습니다.이 예에서 우리는 왼쪽 상단(0 0, 왼쪽 하단(0% 100%과 오른쪽 중심(100% 50%에 점이 있다.
다음은 Dell의 결과입니다.
clip-path는 많은 모양에 유연하고 어떠한 경계틀이나 종횡비에도 적응할 수 있기 때문에 가장 신축성이 있지만 주의사항도 있다.
브라우저가 경계 상자 밖에 아무것도 그리지 않는다고 말했을 때, 이것은 경계 box-shadow 와 outline 를 포함한다.이 물건들은 재단에 적합한 모양으로 다시 그려지지 않는다.이것은 함정일 수도 있고, 추가 요소가 필요하거나, 효과를 부모 단계로 이동해서 잃어버린 효과를 대체할 수도 있다.

Here's an egghead video by Colby Fayock to better understand clip-path and how to bring back effects like box-shadow

데모

이 프레젠테이션은 CSS 삼각형을 작성하는 방법::after을 사용하여 각 요소에 추가하고 뷰포트 셀을 사용하여 응답하는 세 가지를 보여줍니다.