CSS만 사용하여 세 모서리가 둥근 삼각형을 어떻게 만들 수 있나요?

CSS를 사용하여 세 모서리가 둥근 삼각형 구현

이 기사에서는 맞춤형 색상의 세 모서리 삼각형을 만드는 과제에 대해 설명합니다. JavaScript나 HTML5 캔버스 없이 순수 CSS를 사용하는 둥근 삼각형 support.

문제 설명

이미지 오버레이나 JS 기반 기술에 의존하지 않고 아래와 같은 모양을 만드는 것이 목표입니다.

[세 모서리가 둥근 이미지 삼각형]

솔루션

다음은 저자의 독창적인 아이디어에서 영감을 받은 우아한 CSS 솔루션입니다.

.triangle {
  position: relative;
  background-color: orange;
  text-align: left;
}

.triangle:before,
.triangle:after {
  content: '';
  position: absolute;
  background-color: inherit;
}

.triangle,
.triangle:before,
.triangle:after {
  width: 10em;
  height: 10em;
  border-top-right-radius: 30%;
}

.triangle {
  transform: rotate(-60deg) skewX(-30deg) scale(1, .866);
}

.triangle:before {
  transform: rotate(-135deg) skewX(-45deg) scale(1.414, .707) translate(0, -50%);
}

.triangle:after {
  transform: rotate(135deg) skewY(-45deg) scale(.707, 1.414) translate(50%);
}

설명

이 솔루션은 여러 CSS 변환을 결합하여 원하는 결과를 얻습니다. 모양:

• .triangle: 기본 삼각형을 정의하고 배경색을 설정합니다.
• .triangle:before, .triangle:after: 추가를 위해 두 개의 의사 요소가 추가되었습니다. 모서리.
• 백분율 기반 크기: 모든 요소의 너비와 높이는 모든 크기에서 동일하게 확장되도록 10em입니다.
• 테두리 상단- right-radius: 오른쪽 상단 모서리의 반경을 설정하여 둥근 모양을 만듭니다. 효과.
• 변환: 일련의 회전, 기울이기 및 배율이 적용되어 삼각형을 회전하고 타원 모양을 조정합니다. 특정 값은 원하는 종횡비에 따라 약간의 조정이 필요할 수 있습니다.

최종 결과는 전적으로 CSS로 제작된 픽셀 단위의 완벽한 세 모서리 둥근 삼각형입니다.

위 내용은 CSS만 사용하여 세 모서리가 둥근 삼각형을 어떻게 만들 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!