> 웹 프론트엔드 > CSS 튜토리얼 > CSS만 사용하여 직사각형에서 원을 자르는 방법은 무엇입니까?

CSS만 사용하여 직사각형에서 원을 자르는 방법은 무엇입니까?

Mary-Kate Olsen
풀어 주다: 2024-12-23 14:41:11
원래의
468명이 탐색했습니다.

How to Cut a Circle from a Rectangle Using Only CSS?

CSS의 직사각형 모양에서 원 잘라내기

이 효과를 만드는 한 가지 접근 방식은 요소와 영리한 요소의 조합을 사용하는 것입니다. 경계 반경을 사용합니다. 그러나 이 기술은 불규칙한 마크업과 특정 브라우저에서 보기 흉한 간격 등의 잠재적인 단점이 있습니다.

대체 접근 방식

다행히도 다음을 사용하는 대체 방법이 있습니다. 의사 요소와 함께 단일 요소. 이 접근 방식은 상위 요소에 대해 방사형 그라데이션 배경의 기능을 활용하는 반면 의사 요소는 투명한 원 컷아웃 역할을 합니다.

다음 코드 조각을 고려하세요.

div:before {
  /* creates the red circle */
  position: absolute;
  content: '';
  width: 90px;
  height: 90px;
  top: -75px;
  left: calc(50% - 45px);
  background-color: red;
  border-radius: 50%;
}
div {
  position: relative;
  margin: 100px auto 0 auto;
  width: 90%;
  height: 150px;
  border-radius: 6px;  
  
  /* only the below creates the transparent gap and the fill */
  background: radial-gradient(50px 50px at 50% -30px, rgba(0, 0, 0, 0) 49.5px, rgba(0, 0, 0, .8) 50.5px);
}
로그인 후 복사

설명

  • div 요소는 둥근 모양으로 완성된 직사각형 모양을 정의합니다. 모서리.
  • div 내부의 의사 요소 :before는 절대 위치 지정과 빨간색 실선 테두리를 사용하여 원형 컷아웃을 생성합니다.
  • 투명한 간격 및 채우기 효과는 방사형 적용을 통해 달성됩니다. div 요소의 그라데이션 배경입니다. 그라데이션은 중앙에 투명한 영역을 생성하고, 이는 의사 요소의 원과 겹쳐서 컷아웃 효과를 가져옵니다.

이 기술은 다음과 같은 여러 가지 장점을 제공합니다.

  • 추가 요소가 필요하지 않아 마크업이 단순화됩니다.
  • 눈에 띄는 부분 없이 브라우저 전반에서 일관되게 작동합니다.
  • 간단한 계산을 사용하여 원을 직사각형 내 중앙에 정확하게 배치할 수 있습니다.

이 대체 접근 방식을 구현하면 CSS의 직사각형 모양에서 원을 효과적으로 잘라낼 수 있습니다. 이전 방법의 복잡성과 함정 없이 원하는 시각적 결과를 얻을 수 있습니다.

위 내용은 CSS만 사용하여 직사각형에서 원을 자르는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿