현재 버전

체크박스 커스텀 하는거야 검색하셨으니 방식은 아시겠고 저 디자인만 필요하신거면

이미지가 편하긴 한데 아니면 만들어야죠..

<div class="box"></div>
.box{
  position: relative;
  width: 90px;
  height: 100px;
  background-color: #FFC90C;
  border-radius: 10px;
}

.box::after{
  content: "";
  position: absolute;
  width: 40px;
  height: 45px;
  border : 10px solid #fff;
  border-radius: 5px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-sizing: border-box;
}

이런식으로하면 되긴합니다만 (사이즈나 색은 대강 찍어서했습니다.)

https://jsbin.com/voqavukigu/2/edit?html,css,output

* 결과 이미지가 안올라가네요;


수정 이력

2021-09-15 11:17:20 에 아래 내용에서 변경 됨 #9

체크박스 커스텀 하는거야 검색하셨으니 방식은 아시겠고 저 디자인만 필요하신거면

이미지가 편하긴 한데 아니면 만들어야죠..

<div class="box"></div>
.box{
  position: relative;
  width: 90px;
  height: 100px;
  background-color: #FFC90C;
  border-radius: 10px;
}

.box::after{
  content: "";
  position: absolute;
  width: 40px;
  height: 45px;
  border : 10px solid #fff;
  border-radius: 5px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-sizing: border-box;
}

이런식으로하면 되긴합니다만

https://jsbin.com/voqavukigu/2/edit?html,css,output

* 결과 이미지가 안올라가네요;

2021-09-15 11:16:40 에 아래 내용에서 변경 됨 #8

체크박스 커스텀 하는거야 검색하셨으니 방식은 아시겠고 저 디자인만 필요하신거면

이미지가 편하긴 한데 아니면 만들어야죠..

<div class="box"></div>
.box{
  position: relative;
  width: 90px;
  height: 100px;
  background-color: #FFC90C;
  border-radius: 10px;
}

.box::after{
  content: "";
  position: absolute;
  width: 40px;
  height: 45px;
  border : 10px solid #fff;
  border-radius: 5px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-sizing: border-box;
}

이런식으로하면 되긴합니다만

https://jsbin.com/voqavukigu/2/edit?html,css,output

* 결과 이미지가 안올라가네요;

2021-09-15 11:16:16 에 아래 내용에서 변경 됨 #7

체크박스 커스텀 하는거야 검색하셨으니 방식은 아시겠고 저 디자인만 필요하신거면

이미지가 편하긴 한데 아니면 만들어야죠..

<div class="box"></div>
.box{
  position: relative;
  width: 90px;
  height: 100px;
  background-color: #FFC90C;
  border-radius: 10px;
}

.box::after{
  content: "";
  position: absolute;
  width: 40px;
  height: 45px;
  border : 10px solid #fff;
  border-radius: 5px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-sizing: border-box;
}

이런식으로하면 되긴합니다만

https://jsbin.com/voqavukigu/2/edit?html,css,output

* 결과 이미지가 안올라가네요;

2021-09-15 11:16:03 에 아래 내용에서 변경 됨 #6

체크박스 커스텀 하는거야 검색하셨으니 방식은 아시겠고 저 디자인만 필요하신거면

이미지가 편하긴 한데 아니면 만들어야죠..

<div class="box"></div>
.box{
  position: relative;
  width: 90px;
  height: 100px;
  background-color: #FFC90C;
  border-radius: 10px;
}

.box::after{
  content: "";
  position: absolute;
  width: 40px;
  height: 45px;
  border : 10px solid #fff;
  border-radius: 5px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-sizing: border-box;
}

이런식으로하면 되긴합니다만


* 결과 이미지가 안올라가네요;

2021-09-15 11:15:02 에 아래 내용에서 변경 됨 #5


체크박스 커스텀 하는거야 검색하셨으니 방식은 아시겠고 저 디자인만 필요하신거면

이미지가 편하긴 한데 아니면 만들어야죠..

<div class="box"></div>
.box{
  position: relative;
  width: 90px;
  height: 100px;
  background-color: #FFC90C;
  border-radius: 10px;
}

.box::after{
  content: "";
  position: absolute;
  width: 40px;
  height: 45px;
  border : 10px solid #fff;
  border-radius: 5px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-sizing: border-box;
}

이런식으로하면 되긴합니다만

2021-09-15 11:14:41 에 아래 내용에서 변경 됨 #4

체크박스 커스텀 하는거야 검색하셨으니 방식은 아시겠고 저 디자인만 필요하신거면

이미지가 편하긴 한데 아니면 만들어야죠..

<div class="box"></div>
.box{
  position: relative;
  width: 90px;
  height: 100px;
  background-color: #FFC90C;
  border-radius: 10px;
}

.box::after{
  content: "";
  position: absolute;
  width: 40px;
  height: 45px;
  border : 10px solid #fff;
  border-radius: 5px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-sizing: border-box;
}

이런식으로하면 되긴합니다만

2021-09-15 11:14:08 에 아래 내용에서 변경 됨 #3

체크박스 커스텀 하는거야 검색하셨으니 방식은 아시겠고 저 디자인만 필요하신거면

이미지가 편하긴 한데 아니면 만들어야죠..

<div class="box"></div>
.box{
  position: relative;
  width: 90px;
  height: 100px;
  background-color: #FFC90C;
  border-radius: 10px;
}

.box::after{
  content: "";
  position: absolute;
  width: 40px;
  height: 45px;
  border : 10px solid #fff;
  border-radius: 5px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-sizing: border-box;
}

이런식으로하면 되긴합니다만

2021-09-15 11:12:18 에 아래 내용에서 변경 됨 #2

체크박스 커스텀 하는거야 검색하셨으니 방식은 아시겠고 저 디자인만 필요하신거면

이미지가 편하긴 한데 아니면 만들어야죠..

<div class="box"></div>
.box{
  position: relative;
  width: 90px;
  height: 100px;
  background-color: #FFC90C;
  border-radius: 10px;
}

.box::after{
  content: "";
  position: absolute;
  width: 40px;
  height: 45px;
  border : 10px solid #fff;
  border-radius: 5px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-sizing: border-box;
}

이런식으로하면 되긴합니다만

2021-09-15 11:12:02 에 아래 내용에서 변경 됨 #1

체크박스 커스텀 하는거야 검색하셨으니 방식은 아시겠고 저 디자인만 필요하신거면

이미지가 편하긴 한데 아니면 만들어야죠..

<div class="box"></div>
.box{
  position: relative;
  width: 90px;
  height: 100px;
  background-color: #FFC90C;
  border-radius: 10px;
}

.box::after{
  content: "";
  position: absolute;
  width: 40px;
  height: 45px;
  border : 10px solid #fff;
  border-radius: 5px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-sizing: border-box;
}

이런식으로하면 되긴합니다만