이번에는 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
css ul标签怎么去掉圆点Apr 25, 2022 pm 05:55 PM在css中，可用list-style-type属性来去掉ul的圆点标记，语法为“ul{list-style-type:none}”；list-style-type属性可设置列表项标记的类型，当值为“none”可不定义标记，也可去除已有标记。
css与xml的区别是什么Apr 24, 2022 am 11:21 AM区别是：css是层叠样式表单，是将样式信息与网页内容分离的一种标记语言，主要用来设计网页的样式，还可以对网页各元素进行格式化；xml是可扩展标记语言，是一种数据存储语言，用于使用简单的标记描述数据，将文档分成许多部件并对这些部件加以标识。
css3怎么实现鼠标隐藏效果Apr 27, 2022 pm 05:20 PM在css中，可以利用cursor属性实现鼠标隐藏效果，该属性用于定义鼠标指针放在一个元素边界范围内时所用的光标形状，当属性值设置为none时，就可以实现鼠标隐藏效果，语法为“元素{cursor:none}”。
css怎么实现英文小写转为大写Apr 25, 2022 pm 06:35 PM转换方法：1、给英文元素添加“text-transform: uppercase;”样式，可将所有的英文字母都变成大写；2、给英文元素添加“text-transform:capitalize;”样式，可将英文文本中每个单词的首字母变为大写。
css怎么设置i不是斜体Apr 20, 2022 am 10:36 AM在css中，可以利用“font-style”属性设置i元素不是斜体样式，该属性用于指定文本的字体样式，当属性值设置为“normal”时，会显示元素的标准字体样式，语法为“i元素{font-style:normal}”。
rtl在css是什么意思Apr 24, 2022 am 11:07 AM在css中，rtl是“right-to-left”的缩写，是从右往左的意思，指的是内联内容从右往左依次排布，是direction属性的一个属性值；该属性规定了文本的方向和书写方向，语法为“元素{direction:rtl}”。
怎么设置rotate在css3的旋转中心点Apr 24, 2022 am 10:50 AM在css3中，可以用“transform-origin”属性设置rotate的旋转中心点，该属性可更改转换元素的位置，第一个参数设置x轴的旋转位置，第二个参数设置y轴旋转位置，语法为“transform-origin:x轴位置 y轴位置”。
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
AI Hentai Generator
AI Hentai를 무료로 생성하십시오.
인기 기사
뜨거운 도구
MinGW - Windows용 미니멀리스트 GNU
이 프로젝트는 osdn.net/projects/mingw로 마이그레이션되는 중입니다. 계속해서 그곳에서 우리를 팔로우할 수 있습니다. MinGW: GCC(GNU Compiler Collection)의 기본 Windows 포트로, 기본 Windows 애플리케이션을 구축하기 위한 무료 배포 가능 가져오기 라이브러리 및 헤더 파일로 C99 기능을 지원하는 MSVC 런타임에 대한 확장이 포함되어 있습니다. 모든 MinGW 소프트웨어는 64비트 Windows 플랫폼에서 실행될 수 있습니다.
안전한 시험 브라우저
안전한 시험 브라우저는 온라인 시험을 안전하게 치르기 위한 보안 브라우저 환경입니다. 이 소프트웨어는 모든 컴퓨터를 안전한 워크스테이션으로 바꿔줍니다. 이는 모든 유틸리티에 대한 액세스를 제어하고 학생들이 승인되지 않은 리소스를 사용하는 것을 방지합니다.
Eclipse용 SAP NetWeaver 서버 어댑터
Eclipse를 SAP NetWeaver 애플리케이션 서버와 통합합니다.
SublimeText3 영어 버전
권장 사항: Win 버전, 코드 프롬프트 지원!
mPDF
mPDF는 UTF-8로 인코딩된 HTML에서 PDF 파일을 생성할 수 있는 PHP 라이브러리입니다. 원저자인 Ian Back은 자신의 웹 사이트에서 "즉시" PDF 파일을 출력하고 다양한 언어를 처리하기 위해 mPDF를 작성했습니다. HTML2FPDF와 같은 원본 스크립트보다 유니코드 글꼴을 사용할 때 속도가 느리고 더 큰 파일을 생성하지만 CSS 스타일 등을 지원하고 많은 개선 사항이 있습니다. RTL(아랍어, 히브리어), CJK(중국어, 일본어, 한국어)를 포함한 거의 모든 언어를 지원합니다. 중첩된 블록 수준 요소(예: P, DIV)를 지원합니다.
뜨거운 주제
1371
523619