利用border 实现三角形

宽度设为0，利用left和right撑开容器，然后使用bottom绘制三角形颜色以及三角形锐度

css
 width: 0;
 height: 200px;
 border-left: 20px solid transparent;
 border-right: 20px solid transparent;
 border-bottom: 30px solid red;

利用border-radius完成扇形

css
width: 100px;
height: 100px;
border-top-left-radius: 100px;
background: red;

checkbox 美化

1. 隐藏input标签，使用label for属性，去进行勾选标签
2. 给label标签添加背景图片，勾选中时，切换背景图片

css
<div class="checkbox">
  <input type="checkbox" id="a1" style="display: none;" />
  <label for="a1" class="label">
    选择框1
  </label>
</div>

.label{
  background-image: url('./assets/logo@2x.png');
  background-size: 20px 20px;
}
input:checked + label{
  background: url('./assets/laundry-img@2x.png');
  background-size: 20px 20px;
}