집 >웹 프론트엔드 >CSS 튜토리얼 >CSS를 사용하여 정육각형을 그리는 방법은 무엇입니까? CSS로 정육각형을 그리는 두 가지 방법(코드 예제)

CSS를 사용하여 정육각형을 그리는 방법은 무엇입니까? CSS로 정육각형을 그리는 두 가지 방법(코드 예제)

青灯夜游원래의: 2018-09-11 17:03:344814검색

이 장에서는 CSS로 정육각형을 그리는 방법을 소개합니다. CSS를 사용하여 정육각형을 그리는 두 가지 방법(코드 예제) 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

그 전에 정육각형의 내각과 변의 관계를 이해해야 합니다. 정육각형의 각 내각은 그림과 같이 60도입니다(√3은 실제로 루트 기호 3입니다):

CSS를 사용하여 정육각형을 그리는 방법은 무엇입니까? CSS로 정육각형을 그리는 두 가지 방법(코드 예제)

방법 1: 원리 정육각형은 그림과 같이 왼쪽, 중간, 오른쪽 부분으로 나누어집니다:

CSS를 사용하여 정육각형을 그리는 방법은 무엇입니까? CSS로 정육각형을 그리는 두 가지 방법(코드 예제)

앞부분 삼각형. 부분은 div의 앞 의사 요소이고, 뒤의 삼각형 부분은 div의 뒤 의사 요소입니다.

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>用css画正六边形</title>
		<style type="text/css">
			.div {
                position: relative;
                width: 50px;
                height: 86.6px;
                margin: 50px auto;
                background-color: red;
            }
            .div:before {
                content: &#39;&#39;;
                display: block;
                position: absolute;
                width: 0;
                height: 0;
                right:50px;
                border-width: 43.3px 25px;
                border-style: solid;
                border-color: transparent red transparent transparent;
            }
            .div:after {
                content: &#39;&#39;;
                display: block;
                position: absolute;
                width: 0;
                height: 0;
                left:50px;
                border-width: 43.3px 25px;
                border-style: solid;
                border-color: transparent transparent transparent red;
                top:0;
            }
		</style>
	</head>

	<body>
		<div class=&#39;div&#39;></div>
	</body>

</html>

Rendering:

CSS를 사용하여 정육각형을 그리는 방법은 무엇입니까? CSS로 정육각형을 그리는 두 가지 방법(코드 예제)

div 및 의사 요소의 너비와 높이는 위 공식에 따라 계산되어야 합니다.

방법 2: 정육각형을 너비와 높이가 동일한 세 개의 div로 나눈 다음 위치 지정 및 CSS3 변환을 사용합니다:회전을 사용하여 그림과 같이 좌우로 60도 회전하여 정육각형을 만듭니다.

CSS를 사용하여 정육각형을 그리는 방법은 무엇입니까? CSS로 정육각형을 그리는 두 가지 방법(코드 예제)

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>用css画正六边形</title>
		<style type="text/css">
			.one {
                width: 50px;
                height: 86.6px;
                margin: 0 auto;
                border-top: 1px solid red;
                border-bottom: 1px solid red;
            }
            .two {
                position: absolute;
                width: 50px;
                height: 86.6px;
                left: 25px;
                top: 0;
                transform: translate(-50%,-50%);
                transform: rotate(60deg);
                border-top: 1px solid red;
                border-bottom: 1px solid red;
            }
            .three {
                position: absolute;
                width: 50px;
                height: 86.6px;
                left: 25px;
                top: 0;
                transform: translate(-50%,-50%);
                transform: rotate(300deg);
                border-top: 1px solid red;
                border-bottom: 1px solid red;
            }
		</style>
	</head>

	<body>
		<div style=&#39;position:relative;width:100px;margin:0 auto;&#39;>
		    <div class=&#39;one&#39;></div>
		    <div class=&#39;two&#39;></div>
		    <div class=&#39;three&#39;></div>
		</div>
	</body>

</html>

렌더링 :

CSS를 사용하여 정육각형을 그리는 방법은 무엇입니까? CSS로 정육각형을 그리는 두 가지 방법(코드 예제)

위 내용은 CSS를 사용하여 정육각형을 그리는 방법은 무엇입니까? CSS로 정육각형을 그리는 두 가지 방법(코드 예제)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

css css3 伪元素 transform

성명：

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

이전 기사：브라우저 호환성 문제에 대해 토론하고 일반적인 CSS 버그에 대해 이야기합니다(요약).다음 기사：브라우저 호환성 문제에 대해 토론하고 일반적인 CSS 버그에 대해 이야기합니다(요약).

관련 기사

더보기