삼각형을 그리는 방법❓🔺

여러 가지 방법으로 삼각형을 그릴 수 있습니다. 이 기사에서는 삼각형을 만드는 몇 가지 방법을 보여 드리겠습니다.

1. Photoshop으로 삼각형을 그릴 수 있습니다
2. 이미 생성 된 삼각형 벡터 모양 사용
3. CSS와 HTML로 삼각형 만들기

1. Photoshop에서 삼각형을 그리는 방법

완벽한 삼각형을 그리는 방법에는 여러 가지가 있으며이 기사의 Photoshop에서이 방법을 읽을 수 있습니다. Photoshop에서 삼각형 만들기

How To Make A Triangle In Photoshop

Photoshop에서 삼각형을 만들려면 다각형 도구를 사용합니다 . 삼각형은 3 개의 변이있는 다각형이므로 변을 3으로 설정하십시오.

으로 다각형 도구 3 개면에 당신은 그릴 것 정삼각형을 . 를 눌러 제어-T 와 계속 시프트 키를 삼각형을 회전 눌렀습니다.

트 랭글 유형을 변경하여 이등변 트레인으로 바꾸려면 Control-T를 누르고 너비를 80 %로 변경하십시오 (다른 백분율을 선택할 수 있음).

둥근 삼각형 포토샵

Photoshop CC에는 모서리가 둥근 사각형 을 만드는 데 사용할 수 있는 새로운 둥근 사각형 도구 가 있습니다.

 

그러나 둥근 삼각형 포토샵 모양을 만드는 쉬운 방법은 없습니다. 내가 사용하는 펜 도구를 둥근 삼각형을 만들 수 있습니다.

 

이 Photoshop 액션을 사용하여 모서리가 둥근 모양 을 만들 수 있습니다 .

다음은 펜 도구를 사용하여 Photoshop에서 둥근 모서리를 그리는 방법에 대한 빠른 자습서입니다 .

Photoshop에서 펜 도구를 사용하여 선명하고 둥근 모서리 그리기

 

다각형 도구와 펜 도구를 사용하면 복잡한 삼각형 모양과 다른 기하학적 모양을 만들 수 있습니다.

2. Photoshop 용 삼각형 모양

이 멋진 Triangle Shapes for Photoshop을 다운로드 하여 그래픽 디자인 프로젝트에서 사용하십시오. 벡터 삼각형 모양으로 기하학적 사진 효과, 사진 콜라주 템플릿 등을 만들 수 있습니다.

삼각형 모양은 80 년대 복고풍 신스 웨이브 스타일과 크롬 80 년대 글꼴 및 타이포그래피의 일부였습니다. 80 년대 배경을 만들려면 이 네온 삼각형을 다운로드 할 수 있습니다 .

그림을 임의의 모양으로 자르는 방법 (예 : 삼각형 모양)

일반적으로 그림을 자르는 것은 이미지의 정사각형 또는 직사각형 부분을 자르는 것을 의미합니다. 자르기 도구를 사용하여 쉽게 수행 할 수 있습니다 .

그러나 그림을 사각형과 다른 모양으로 자르려면 어떻게해야합니까?

이미지를 삼각형과 같은 모양 (원 모양 또는 다른 모양)으로 자르려면 먼저 모양을 만드십시오. 이미 삼각형 모양을 만드는 방법을 알고 있습니다. 삼각형 모양을 원하는 색 으로 채우고 둥근 모서리 삼각형으로 만듭니다.

그런 다음 자르려는 그림을 삼각형 모양 레이어 바로 위의 Photoshop 레이어에 배치하십시오. 이미지 레이어를 마우스 오른쪽 버튼으로 클릭하고 클리핑 마스크 만들기를 선택합니다 .

 

끝난!

 

이제 이미지가 삼각형 모양으로 잘 렸습니다. 삼각형은 이제 마스크처럼 작동합니다. 삼각형 모양 레이어를 선택하면 Ctrl + T (Mac의 경우 Command + T) 를 사용하여 삼각형 모양을 변환하거나 회전 할 수 있습니다.

사진 레이어도 마찬가지입니다.
자르기를 원하는대로 배치 한 후 이미지 > 자르기 로 이동 하여 투명 픽셀을 자릅니다.

 

Photoshop을 사용하여 이미지를 둥근 삼각형 모양으로 자르는 방법의 예는 다음과 같습니다.

이 무료 Photoshop 작업을 확인하여 사진을 보다 쉽게 도형 으로 자릅니다 .

3. CSS로 삼각형을 만드는 5 가지 방법

출처 : Create a Triangle With CSS

5 Ways To Create A Triangle With CSS - Coding Dude

border를 사용하여 CSS에서 삼각형 만들기

CSS 삼각형을 만드는 방법에 대해 인터넷을 검색했다면 CSS 트릭 에서이 멋진 기사 를 보았을 것입니다 . CSS border속성을 사용하여 삼각형을 만드는 방법을 빠르게 설명합니다  .

빨리 설명하겠습니다!

다음 HTML 코드를 고려하십시오.

<div class="triangle"></div>

그리고 CSS :

.triangle { border-left: 20px solid cyan; border-right: 20px solid red; border-bottom: 20px solid green; border-top: 20px solid blue; display: inline-block; }

다음과 같이 렌더링됩니다.

HTML 요소의 경계가 결합되는 각도를 형성하기 때문입니다. 이를 사용하여 3 개의 테두리에 투명 색상을 설정하고 하나만 보이도록하여 삼각형을 만들 수 있습니다. 따라서 아래쪽 테두리는 위쪽을 가리키는 삼각형을 만들고 왼쪽 테두리는 오른쪽을 가리키는 삼각형을 만듭니다.

녹색 삼각형을 가리키는 CSS 코드는 다음과 같습니다.

.triangle-up { border-left: 20px solid transparent; border-right: 20px solid transparent; border-bottom: 20px solid green; border-top: 20px solid transparent; display: inline-block; }

다음과 같이 렌더링됩니다.

그리고 지금, 약간의 수학.

보다시피,이 삼각형은 직각 삼각형 입니다. 따라서 상단 각도는 90 도입니다. 두 개의 등변이 있기 때문에 이등변 삼각형 이기도합니다 . 모든 테두리에 대해 동일한 크기를 설정하면 실제로 삼각형의 높이가 설정됩니다.

우리의 경우에는 20 픽셀입니다.

우리의 삼각형은 직각 삼각형과 이등변이기 때문에 삼각형의 밑면이 40 픽셀 (우리가 사용한 테두리 크기의 절반)임을 알 수 있습니다. 그런 다음 각면은 basis / sqrt(2)약 28.2 픽셀 과 같습니다  .

를 사용하여 등변 삼각형을 만드는 방법 border

삼각형을 정삼각형으로하려면 어떻게해야합니까? 삼각형의 세 변이 모두 같습니까?

수학 좀하자!

이전 예제에서 테두리 크기가 실제로 삼각형의 높이를 결정하는 것을 보았습니다. 정삼각형의 높이 공식은 다음과 같습니다.

height = side * sqrt(3) / 2

또한 기본은 선택한 테두리 크기의 두 배라는 점을 명심해야합니다.

따라서 border-width투명한 테두리에 대해 20px로 설정하려면 테두리 크기를 2 * 20px * sqrt(3) / 2

우리는 대략 수 sqrt(3)/2약 0.866 그래서 여기에 CSS 정삼각형의에 :

.triangle-up-equilateral { border-left: 20px solid transparent; border-right: 20px solid transparent; border-bottom: calc(2 * 20px * 0.866) solid green; border-top: 20px solid transparent; display: inline-block; }

다음과 같이 렌더링됩니다.

또는 CSS 클래스를 작성하는 더 좋은 방법이 있습니다.

.triangle-up-equilateral { --side-size: 20px; border-left: var(--side-size) solid transparent; border-right: var(--side-size) solid transparent; border-bottom: calc(2 * var(--side-size) * 0.866) solid green; border-top: var(--side-size) solid transparent; display: inline-block; }

CSS 변수를 사용하면 한 곳에서만 정삼각형의 크기를 설정할 수 있습니다.