상하 대괄호([ ]) 모양(로또 용지 번호 모양) 만들기(css)

<div class="number-wrap"><span class="number">1</span></div>
<div class="number-wrap on"><span class="number">2</span></div>
<div class="number-wrap"><span class="number">3</span></div>
<!-- 이후 번호 생략 ... -->

/* 색상 정의 */
:root {
  --color-black: #000;
  --lotto-color: #e43a3c;
  --primary-background: #fafafa;
  --color-white: #fff;
}

/* 숫자를 감싸는 부분으로, 주황색 테두리를 만들어줍니다. */
.number-wrap {
  position: relative;
  display: inline-block;
  width: 29px;
  height: 47px;
  border: 2px solid var(--lotto-color);
  color: var(--lotto-color);
  font-size: 14px;
  font-weight: bold;
  align-self: center;
  justify-self: center;
  text-align: center;
  vertical-align: middle;
  margin-top: auto;
}

/* 숫자가 선택되었을 때, 검은색으로 마킹 처리 */
.number-wrap.on {
  background-color: var(--color-black);
  color: var(--color-white);
}

/* 괄호 모양을 만들어주는 왼쪽 옆면 지워주기, border 너비에 맞게 left, width 처리 */
.number-wrap::before {
  content: '';
  position: absolute;
  left: -2px;
  top: 20%;
  bottom: 20%;
  width: 2px;
  background-color: var(--primary-background);
}

/* 괄호 모양을 만들어주는 오른쪽 옆면 지워주기, border 너비에 맞게 right, width 처리 */
.number-wrap::after {
  content: '';
  position: absolute;
  right: -2px;
  top: 20%;
  bottom: 20%;
  width: 2px;
  background-color: var(--primary-background);
}

/* 숫자 표시 부분 */
.number {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}