CSS로 반원을 만드는 방법

” HTML 파일의 body 태그 안에 있는 요소입니다.

---

---

HTML

< div >< / div >

이제 ' 너비 ' 속성 값 ' 180픽셀 ' 그리고 ' 키 ' 가치가 있는 속성 ' 90픽셀 '. 다음 단계에서 ' 경계 반경 ' 재산 가치 ' 12렘 12렘 0 0 '; 여기서 첫 번째 숫자 12rem은 div의 왼쪽 상단을 자르고 두 번째 12rem은 오른쪽 상단을 자르고 세 번째와 네 번째 숫자 0은 div의 맨 아래 부분을 잘라냅니다. 마지막으로 원에 색을 입히려면 ' 배경색 ' 값이 '인 속성' 자주색 '.

CSS

div {
너비 : 180픽셀 ;
키 : 90픽셀 ;
경계 반경 : 12렘 12렘 0 0 ;
배경색 : 자주색 ;
}

언급된 코드로 HTML 파일을 저장하고 브라우저에서 엽니다.

보시다시피 CSS border-radius 속성을 사용하여 반원을 성공적으로 만들었습니다.

예 2: CSS를 사용하여 아래쪽에서 반원 만들기

아래쪽에서 반원을 형성하기 위해 border-radius 속성 값을 ' 0 0 12렘 12렘 ', 여기서 처음 두 값은 왼쪽 상단과 오른쪽 상단 경계 반경을 나타냅니다. div의 위쪽 절반이 완전히 사라지도록 0으로 설정했습니다. 하단의 경우 값을 12rem으로 설정하여 왼쪽 하단과 오른쪽 하단만 약간 트리밍했습니다.

CSS

div {
너비 : 180픽셀 ;
키 : 90픽셀 ;
경계 반경 : 0 0 12렘 12렘 ;
배경색 : 자주색 ;
}

산출

예 3: CSS를 사용하여 오른쪽에서 반원 만들기

CSS 반원을 오른쪽으로 만들려면 먼저 적절한 원의 모양을 얻기 위해 필요한 만큼 컨테이너의 높이와 너비를 조정합니다. 설정 ' 너비 ' 처럼 ' 90픽셀 ' 그리고 ' 키 ' 처럼 ' 180픽셀 ' 이 시간. 다시 말하지만, 값이 ' 0 12렘 12렘 0 ', 여기서 첫 번째 값 0은 왼쪽 상단, 마지막 값 0은 왼쪽 하단, 두 번째 및 세 번째 값을 추가하여 오른쪽 상단과 오른쪽 하단을 트리밍합니다. 이 값을 적용하면 오른쪽에서 반원이 형성됩니다.

CSS

div {
너비 : 90픽셀 ;
키 : 180픽셀 ;
경계 반경 : 0 12렘 12렘 0 ;
배경색 : 자주색 ;
}

산출

예 4: CSS를 사용하여 왼쪽에서 반원 만들기

이번에는 '값을 따라 border-radius 속성을 지정하십시오. 12렘 0 0 12렘 '; 첫 번째와 마지막 값인 12rem은 div의 왼쪽 상단과 왼쪽 하단을 자르고, 두 번째와 세 번째 값을 0으로 설정하면 원의 오른쪽 상단과 오른쪽 하단이 지워집니다. 결국 왼쪽 반원이 만들어집니다.

CSS

div {
너비 : 90픽셀 ;
키 : 180픽셀 ;
경계 반경 : 12렘 0 0 12렘 ;
배경색 : 자주색 ;
}

산출

CSS로 반원을 만드는 다양한 방법을 제공했습니다.

결론

반원을 만들려면 CSS ' 경계 반경 ' 재산. 반원은 왼쪽, 오른쪽, 위쪽 및 아래쪽과 같이 좌우로 만들 수 있습니다. border-radius 속성에서 초기 값은 왼쪽 위, 두 번째 값은 오른쪽 위, 세 번째 값은 오른쪽 아래, 네 번째 값은 왼쪽 아래입니다. 이 글에서는 CSS로 반원을 만드는 방법을 설명했습니다.