LocalTools오프라인 브라우저 도구 모음

분류: 개발 도구

CSS 삼각형 생성기

자체 기획 도구찾는 도구가 없나요?

테두리 기법으로 순수 CSS 삼각형 만들기

방향, 크기, 색상을 선택하면 한쪽 테두리에만 색을 주고 나머지 두 쪽은 투명하게 만들어 삼각형처럼 보이는, 너비와 높이가 0인 박스를 만듭니다. 실시간 미리보기와 복사할 수 있는 CSS 선언이 함께 제공됩니다. 모든 계산은 브라우저에서 이루어집니다.

출력
width: 0;
height: 0;
border-right: 80px solid transparent;
border-bottom: 80px solid #0f7b63;
border-left: 80px solid transparent;

이 페이지의 모든 처리는 브라우저에서 이루어집니다. 업로드는 없습니다.

이 도구로 할 수 있는 일

CSS 삼각형은 `width: 0; height: 0;`인 박스에 한쪽 테두리만 색을 주고 그 옆의 두 테두리를 투명하게 만들어, 색이 있는 테두리의 쐐기 모양만 보이게 하는 기법입니다. 어느 쪽 테두리에 색을 주고 어느 쪽을 투명하게 해야 하는지 손으로 계산하면 뒤바뀌기 쉽습니다. 이 도구는 방향, 크기, 색상으로부터 네 개의 테두리 선언을 만들고, 값을 바꿀 때마다 실제 박스에 결과를 보여줍니다.

사용 방법

  1. 방향을 선택하세요: 위, 아래, 왼쪽, 오른쪽.
  2. 크기와 색상을 설정하세요.
  3. 테두리 선언을 스타일시트에 복사하세요.

개인정보

이 도구는 전부 브라우저 안에서 동작합니다. 입력한 내용은 업로드되거나 저장되거나 공유되지 않으며, 탭을 닫으면 사라집니다.

자주 묻는 질문

서버로 전송되는 것이 있나요?
아니요. 미리보기는 브라우저가 렌더링하는 실제 CSS 테두리이며, 선언 코드는 페이지에서 조립되는 텍스트입니다.
왜 너비와 높이를 0으로 설정해야 하나요?
테두리 기법은 테두리들이 박스를 감싸는 대신 한 점에서 만나는 것을 이용합니다. 너비나 높이가 0이 아니면 쐐기 모양이 사다리꼴로 찌그러집니다.
툴팁이나 말풍선의 화살표로 사용할 수 있나요?
네, 가장 흔한 사용 사례입니다. 삼각형을 툴팁 가장자리에 절대 위치로 배치하고 색상을 툴팁 배경과 맞추면 됩니다.

전체 도구로 돌아가기