プログラム
HTML
<div class="or">
<input type="checkbox" id="input4">
<label for="input4" class="label2">
<div class="div1 a1"></div>
</label>
<input type="checkbox" id="input5">
<label for="input5" class="label2">
<div class="div1 a2"></div>
</label>
<div class="div1 a3"></div>
<div class="divA"></div>
<div class="divB"></div>
</div>
/*CSS*/
input{
display: none;}
/* ---divを使ってチェックボックスを作ります---- */
.or{
width: 100px; height: 100px;/*箱の大きさです*/
position: relative;
top: 10px;left: 30px;}
.div1{
width: 20px; height: 20px;/*箱の大きさです*/
border: 1px solid #000;/*太さと色です。*/
cursor: pointer;/*ポインターにします*/
position: relative;}
.divA{
width: 70px;height: 50px;
border-top: 1px solid #000;/*太さと色です。*/
border-right: 1px solid #000;/*太さと色です。*/
border-left: 1px solid #000;/*太さと色です。*/
border-radius: 35px 35px 0 0;/*角の丸さです*/
top: -34px;left: 12px;
position: relative;}
.divB{
transform: matrix(1,0,0,.3,0,0);
width: 70px;height: 50px;
border-top: 1px solid #000;/*太さと色です。*/
border-right: 1px solid #000;/*太さと色です。*/
border-left: 1px solid #000;/*太さと色です。*/
border-radius: 35px 35px 0 0;/*角の丸さです*/
top: -60px;left: 12px;
position: relative;}
.a1{top: 79px;left: 59px;}
.a2{top: 57px;left: 15px;}
.a3{top: -33px;left: 38px;}
/* -----複数のチェックボックスの組を作ります------- */
#input4:checked ~ .label2 .a1{
/*チェックしたときの箱の色です*/
background: #a00;}
#input5:checked ~ .label2 .a2{
/*チェックしたときの箱の色です*/
background: #a00;}
#input4:checked ~ .a3{/*チェックしたときの箱の色です*/
background: #a00;}
#input5:checked ~ .a3{/*チェックしたときの箱の色です*/
background: #a00;}