CSS 로 Israel flag(이스라엘 국기) 만들기

시고르자브종종 2023. 5. 17. 15:52

2023. 5. 17. 15:52

1. css - make Israel flag css로 이스라엘 국기 만들기

css로 삼각형을 만들다가 삼각형이 많이 들어간 국기가 떠올랐다.

그것은 바로 이스라엘 국기!

2. 어떻게 만드는가?

노가다!

<!DOCTYPE html>
<html lang="en">
<head>

<style>
:root {
  --a: 1.05em;
  --b: 1;
}
body {
background-color:gray;
}
.canvas {
margin:0em;
position:relative;
width:44em;
height:32em;
border:0.02em solid #000;
background-color: #fff;
}

.cPoint{
position:absolute;
width:0em;
height:0em;
top:50%;
left:50%;
border-top:0.5em solid #aa0000;
border-right:0.5em solid transparent;
border-left:0.5em solid transparent;
border-bottom:0.5em solid #aa0000;
transform: translate(-50%, -50%);
}

.line1{
position:absolute;
top:3em;
width:44em;
height:5em;
background-color:#0038b8;
}

.starDavid1{
position:absolute;
top: 14.905em;
left:21.85em;

transform: translate(-50%, -50%);

width:8.5em;
height:7.2em;
border-right:var(--a) solid transparent;
border-left:var(--a) solid transparent;
border-bottom:var(--a) solid #0038b8;
opacity:var(--b);

}

.starDavid2{
position:absolute;
top:12.38em;
left:15.63em;

transform:translate(-50%, -50%);

width:8.5em;
height:7.2em;
border-right:var(--a) solid transparent;
border-left:var(--a) solid transparent;
border-bottom:var(--a) solid #0038b8;
transform: rotate(240deg);
opacity:var(--b);

}

.starDavid3{
position:absolute;
top:12.38em;
left:17.465em;

transform:translate(-50%, -50%);

width:8.5em;
height:7.2em;
border-right:var(--a) solid transparent;
border-left:var(--a) solid transparent;
border-bottom:var(--a) solid #0038b8;
transform: rotate(120deg);
opacity:var(--b);

}

.starDavid4{
position:absolute;
top:12.92em;
left:16.55em;

transform:translate(-50%, -50%);

width:8.5em;
height:7.2em;
border-right:var(--a) solid transparent;
border-left:var(--a) solid transparent;
border-bottom:var(--a) solid #0038b8;
transform: rotate(180deg);
opacity:var(--b);

}
.starDavid5{
position:absolute;
top:11.322em;
left:17.465em;
transform:translate(-50%, -50%);
width:8.5em;
height:7.2em;
border-right:var(--a) solid transparent;
border-left:var(--a) solid transparent;
border-bottom:var(--a) solid #0038b8;
transform: rotate(420deg);
opacity:var(--b);
}

.starDavid6{
position:absolute;
top:11.322em;
left:15.638em;

transform:translate(-50%, -50%);

width:8.5em;
height:7.2em;
border-right:var(--a) solid transparent;
border-left:var(--a) solid transparent;
border-bottom:var(--a) solid #0038b8;
transform: rotate(300deg);
opacity:var(--b);
}

.line2{
position:absolute;
top:24em;
width:44em;
height:5em;
background-color:#0038b8;
}
</style>


<title>Document</title>
</head>
<body>
<div class="canvas">

<div class="line1"></div>
<div class="starDavid1"></div>
<div class="starDavid2"></div>
<div class="starDavid3"></div>
<div class="starDavid4"></div>
<div class="starDavid5"></div>
<div class="starDavid6"></div>
<div class="line2"></div>
</div>

</body>
</html>

3. 어떻게 나오는가?

이렇게 나왔다!

저작자표시 비영리 변경금지

'HTML CSS JS' 카테고리의 다른 글

자바 같은 키로 눌러서 변수 바꾸기 (0)	2023.11.10
스프링 프레임워크 게시판 만들기 순서 2 - CRUD (0)	2023.07.18
스프링 프레임워크 게시판 만들기 순서1 (0)	2023.07.18
자바 배운 것 누적 블로그 (0)	2023.06.26
최악의 국비 강의, 너무 화나서 하는 정리 만화 : JDBC (0)	2023.06.21

이렛날