CSS로 육각형 그림을 만드는 방법
- php中世界最好的语言원래의
- 2018-01-30 10:31:242420검색
이번에는 CSS로 육각형 그림을 만드는 방법을 보여드리겠습니다. CSS로 육각형 그림을 만들 때 주의사항은 무엇인가요? 실제 사례를 살펴보겠습니다.
이 육각형 그림을 '그리기' 위해서는 의사 요소가 포함된 간단한 div를 사용하는 것이 원칙입니다. 너비와 높이가 같은 세 개의 div를 위치 지정 및 회전을 통해 육각형으로 결합한 다음 배경 이미지를 겹쳐서 완전한 시각적 개체를 형성하는 것입니다. 그림. 단계별로 구현해 보겠습니다.
(1) 따라서 첫 번째 단계는 물론 컨테이너를 그리는 것입니다. 컨테이너는 너비와 높이가 있는 div입니다.
그리기 전에 문제를 이해해야 합니다. 즉, 정육각형은 너비와 높이가 같은 세 개의 div로 구성됩니다(아래 그림과 같이 div의 너비와 높이가 의 조건을 충족해야 함). √3회 정육각형을 만듭니다. 여기서는 이 값을 계산하는 방법을 가르쳐주지 않습니다. 관심이 있는 경우 삼각 함수를 사용하여 직접 계산할 수 있습니다.
여기에서는 외부 컨테이너의 너비를 190px로 설정합니다. 높이를 110px로 설정한 다음 배경 이미지를 설정합니다. 코드는 다음과 같습니다
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
.wrap{
height:110px;
width: 190px;
position: relative;
margin: 200px auto;
background: url('./eddie.jpg') 50% 50% no-repeat;
background-size: auto 220px;
}
</style>
<body>
<div class='wrap'>
</div>
</body>
</html>(2) 두 번째 단계는 왼쪽 div와 해당 의사 요소 이미지를 그리는 것입니다.
이 단계에서는 새 div를 사용하여 육각형의 왼쪽을 위치시키고 회전시킨 후 새 div의 의사 요소를 설정합니다. 너비와 높이를 위 그림과 동일한 배경 이미지로 설정합니다. 새 div 의사 요소의 너비와 높이는 너비입니다. 그런 다음 이미지가 수직으로 표시되도록 의사 요소를 회전합니다. (새 div를 회전해야 하므로 의사 요소 이미지도 회전하므로 다시 정상으로 회전해야 합니다. 각도) 및 의사 요소의 위치를 조정해야 합니다(새 div가 회전되어 의사 요소의 위치 지정에 영향을 줍니다). 마지막으로 새 div가 숨김을 초과하도록 설정하고 육각형의 왼쪽이 그려집니다
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
.wrap{
height:110px;
width: 190px;
position: relative;
margin: 200px auto;
background: url('./eddie.jpg') 50% 50% no-repeat;
background-size: auto 220px;
}
.common{
position: absolute;
height: 100%;
width: 100%;
overflow: hidden;
left:0;
23
}
.common:before{
content:'';
position: absolute;
background:url('./eddie.jpg') 50% 50% no-repeat;
background-size: auto 220px;
width: 190px;
height: 220px;
}
.left{
transform: rotate(60deg);
}
.left:before{
transform: rotate(-60deg) translate(48px,-28px);
}
</style>
<body>
<div class='wrap'>
<div class='left common'></div>
</div>
</body>
</html> (3) 세 번째 단계는 오른쪽의 div와 의사 요소 이미지를 그리는 것입니다
이 단계의 원리는 두 번째 부분과 동일하지만 각도가 반대이므로 자세히 설명하지 않겠습니다. 완성된 코드로 바로가기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
.wrap{
height:110px;
width: 190px;
position: relative;
margin: 200px auto;
background: url('./eddie.jpg') 50% 50% no-repeat;
background-size: auto 220px;
}
.common{
position: absolute;
height: 100%;
width: 100%;
overflow: hidden;
left:0;
}
.common:before{
content:'';
position: absolute;
background:url('./eddie.jpg') 50% 50% no-repeat;
background-size: auto 220px;
width: 190px;
height: 220px;
}
.left{
transform: rotate(60deg);
}
.left:before{
transform: rotate(-60deg) translate(48px,-28px);
}
.right{
transform: rotate(-60deg);
}
.right:before{
transform: rotate(60deg) translate(48px,28px);
bottom: 0;
}
</style>
<body>
<div class='wrap'>
<div class='left common'></div>
<div class='right common'></div>
</div>
</body>
</html>이쯤 되면 글의 시작 부분에 있는 그림을 표시할 수 있습니다. 이 원리를 이용해서 다른 그림 표시 효과도 만들 수 있습니다. 앞으로도 계속 공부해 보세요. , 사진 디스플레이는 더 이상 단일 벽돌이 아닙니다!
이 사례를 읽고 나면 더 흥미로운 기사를 보려면 PHP 중국어 웹사이트에 있는 다른 관련 기사를 주목하세요! 읽기:
HTML5 드롭다운 상자에서 사용자 경험을 높이는 방법H5의 WebGL을 사용하는 방법 동일한 인터페이스로 json 및 echarts 차트 만들기H5의 새로운 의미 체계 태그 기능을 사용하는 방법위 내용은 CSS로 육각형 그림을 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!