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

CSS에서 세 모서리가 둥근 삼각형 만들기

자바스크립트 없이 CSS를 사용하여 맞춤 모양을 만드는 것은 어려울 수 있으며, 특히 완벽한 픽셀 정밀도를 목표로 하는 경우 더욱 그렇습니다. 일반적인 작업 중 하나는 모서리가 둥근 삼각형을 만드는 것인데, 이는 다양한 기술을 사용하여 접근할 수 있습니다.

CSS 전용 솔루션:

세 모서리를 달성하려면 -순수한 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 변환, 기울이기 및 크기 조정을 사용하여 원하는 모양을 만듭니다. 픽셀 단위까지 완벽한 정밀도를 제공하며 이해하기가 상대적으로 직관적입니다.

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