css怎么做打勾的方框

html-css04

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>

1、引用字体图标样式,用字体图标解决。

2、用背景图片解决。

3、用字符解决,就是

√    √  

.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)

}