[CSS Battle - 11] 1-11. Eye of Sauron

📍타겟 이미지

 

📍문제 풀이

✅z-index를  활용하여 우선순위를 낮춰서 겹치는 레이어를 구현한다

- z-index를 사용할 때는 position이 default 이외 어떤 것이든 적용되어야 함을 유의

 

✅반원형은 border-radius를 각 꼭지점에 적용하여 구현한다

- border-raduis: 11시 2시 5시 8시 방향 순이다

 

📍코드

<main>
  <div id="first" class="size-m circle">
    <div class="up rect dark"></div>
    <div class="down rect yellow"></div>
    <div class="size-s circle dark"></div>
  </div>
  <div id="second" class="size-m circle dark">
    <div class="size-s circle"></div>
  </div>
  <div id="third" class="size-m circle">
    <div class="up rect yellow"></div>
    <div class="down rect dark"></div>
    <div class="size-s circle dark"></div>
  </div>
  <div class="size-l circle yellow"></div>
</main>
<style>
	body {
		background: #191210;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	main {
		display: flex;
		position: relative;
	}
	.rect {
		width: 100px;
		height: 50px;
	}
	.circle {
		border-radius: 50%;
	}
	.dark {
		background: #191210;
	}
	.yellow {
		background: #ECA03D;
	}
	#first {
		position: relative;
		z-index: -5;
	}
	#first .down {
		border-radius: 0 0 50px 50px;
	}
	#first .size-s {
		background: #191210;
		position: absolute;
		top: 20%;
		left: 20%;
	}
	#second {
		background: #191210;
		position: relative;
	}
	#second .size-s {
		background: #84271C;
		position: absolute;
		top: 25%;
		left: 25%;
		z-index: 99;
		width: 50px;
		height: 50px;
	}
	#third {
		position: relative;
		z-index: -5;
	}
	#third .up {
		border-radius: 50px 50px 0 0;
	}
	#third .size-s {
		background: #191210;
		position: absolute;
		top: 20%;
		left: 20%;
	}
	.size-s {
		width: 60px;
		height: 60px;
	}
	.size-m {
		width: 100px;
		height: 100px;
	}
	.size-l {
		width: 140px;
		height: 140px;
		position: absolute;
		top: -20%;
		left: 26.5%;
		z-index: -1;
	}
</style>

 

📍결과

100% match