a11y.skipToMainContent
1

CSS 삼각형 발전기

국경 트릭과 순수 CSS 삼각형을 생성 - 방향, 크기 및 색상을 선택, 다음 CSS를 복사.

px
px

Diagonal (corner) triangles are right-angled and ignore the separate height value, using the width for both sides.

Preview

CSS

Was this tool helpful?
Send output to:
Advertisement

How to use CSS Triangle Generator

  1. 방향을 선택하십시오., 아래로, 왼쪽, 오른쪽, 또는 4 개의 대각선 모서리 중 하나.
  2. 삼각형의 기초와 점을 통제하기 위하여 폭과 고도를 놓으십시오.
  3. 삼각형의 눈에 보이는 측면에 대한 충분한 색상을 선택합니다.
  4. 복사 CSS를 클릭하여 너비, 높이 및 경계 선언을 복사합니다.

CSS 삼각형 생성기은 무엇입니까?

A 순 CSS 삼각형은 0 크기 요소 두께의 경계를 제공하고 그 세 개의 경계를 transparent. 색상의 경계가 투명 한 것을 만나는 곳, 대각선 솔기는 삼각형을 형성 — 이미지 또는 SVG 필요 없음.

이 발전기는 수학을 처리합니다 : 8 개의 방향 중 하나를 선택하십시오 ( 네 개의 측면과 4 개의 오른쪽 각도 모서리), width, height 및 색상을 설정하고 결과를 복사하십시오. width : 0; 높이 : 0; 및 border-*는 스타일 시트로 똑바로 선언합니다.

Advertisement

FAQ

CSS 국경 삼각형 트릭은 어떻게 작동합니까?
폭 0과 높이 0의 요소는 여전히 45도 대각선 솔기에 맞은 국경을 렌더링합니다. 1개의 국경을 착색하고 다른 3개의 투명한 잎을 착색한 측과 그것의 점과 더불어 단 하나 삼각형 모양을 만듭니다.
왜 코너 삼각형은 맞 각도?
대각선 방향은 두 개의 인접한 경계를 사용하므로 삼각형은 그 경계가 만나는 광장이 있습니다. 양측은 동일한 국경 폭에서 옵니다 때문에, 코너 삼각형은 다리 둘 다를 위한 폭 가치를 이용하고 분리한 고도를 무시합니다.
삼각형의 크기를 어떻게 변경합니까?
폭과 고도를 조정하십시오: 더 큰 착색한 국경은 그 방향에서 삼각형을 더 길게 만들고, 투명한 국경은 기초의 폭을 놓았습니다. 도구는 슬라이더를 드래그하여 경계 값을 업데이트합니다.

Related tools

Author

MW
Marcus Webb"The DevTool Craftsman"

Full-Stack Developer & Tools Architect

Marcus has been writing code since the dial-up era. He has contributed to open-source developer tools, built CI/CD pipelines for startups, and debugged production incidents at 3 AM more times than he would like to admit. His philosophy is that the best developer tool is the one that gets out of your way, and he writes about practical tooling that helps teams ship faster with fewer headaches.

📖 CSS Triangle Generator on Wikipedia·Developer Tools on Wikipedia·CSS Triangle Generator on Britannica

People also use

← Back to Developer Tools · All tags

Last updated:

Advertisement