JavaScript 없이 CSS에서 세 모서리가 둥근 삼각형을 어떻게 만들 수 있습니까?

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

자바스크립트 없이 모서리가 둥근 맞춤형 색상 도형을 만드는 것은 어려울 수 있습니다. 이 문제를 해결하기 위해 CSS 기술을 사용하여 원하는 미적 특성을 지닌 시각적으로 매력적인 삼각형을 생성할 수 있습니다.

모서리가 3개인 삼각형을 만드는 한 가지 접근 방식은 신중하게 제작된 변형 및 모양 조정이 포함된 여러 요소를 사용하는 것입니다. :before 및 :after 의사 요소를 활용하면 고유한 모양의 단일 요소처럼 보이는 효과를 만들 수 있습니다.

다음은 모든 크기에서 픽셀 단위까지 완벽한 결과를 제공하는 세련된 솔루션입니다.

.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%);
}

이 접근 방식을 사용하면 다양하고 시각적으로 매력적인 삼각형을 쉽게 만들어 웹 디자인의 미적 매력을 높일 수 있습니다.

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