CSSBattle Apr 9, 2025

문제

풀이

HTML

  <div class="container">
    <div class="box">
      // 주황색 원
      <div class="circle"></div>
      // 가운데 흰색 바
      <div class="bar"></div>
    </div>
  </div>

CSS

* {
  margin: 0;
  box-sizing: border-box;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;

  background: #F58220;
}

.box {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 300px;
  height: 140px;

  border: 20px solid #FFFFFF;
}

.circle {
  position: absolute;
  width: 180px;
  height: 180px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  border-radius: 50%;
  background: #F58220;
}

.bar {
  border: 10px solid white;
  width: 100%;
  background: #FFFFFF;
  z-index: 100;
}