css怎么做打勾的方框

html-css045

css怎么做打勾的方框,第1张

这个得用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:比较推荐背景图片写法,点击事件更好控制。望采纳