这个得用Html做的
<form action="" method="get">
您喜欢的水果?<br />
<label><input name="Fruit" type="checkbox" value="0" />苹果 </label>
<label><input name="Fruit" type="checkbox" value="1" />桃子 </label>
<label><input name="Fruit" type="checkbox" value="2" />香蕉 </label>
<label><input name="Fruit" type="checkbox" value="3" />梨 </label>
</form>
.box {width: 150px
height: 150px
margin: 100px auto
border-radius : 5e%
border: 5px solid #o0000e
display: flex
justify-content: center
align-items : center
}
.box: : before {
content: ""
display: block
width: 88px
height: 5epx
border: 20px solid #ee000e
border-right: none
border-top: none
transform: rotate(-45deg) translate(7px,-10px)
}
没有代码那就只说思路,两个思路吧:
利用绝对定位把对号放在框的右下。
用背景图片写法,把对号当做框的背景图。
PS:比较推荐背景图片写法,点击事件更好控制。望采纳