css 绘制特殊图形

[myLightLin]

扇形

如果只是单纯的四个角度的正扇形，可以用如下方式 ：

<style>
  .box {
    width: 0;
    hegiht: 0;
    border: 100px solid red;
    border-radius: 50%;
    border-bottom: 100px solid transparent;
    border-left: 100px solid transparent;
    border-right: 100px solid transparent;
  }
</style>
<div class="box"></div>

效果如下：

如果是要任意角度的扇形，那就需要使用到 transform 的 skew 属性，大致思路就是：先画一个正方形，再画一个带 border-radius 的正方形绝对定位到右上角，然后再使用 skew 调整角度，得到扇形。

  <style>
    #div {
        margin-top: 200px;
        margin-left: 200px;
        width: 100px;
        height: 100px;
        position: relative;
        overflow: hidden;
    }
    #circle {
        position: absolute;
        right: 0;
        top: 0;
        width: 200px;
        height: 200px;
        border-radius: 50%;
        overflow: hidden;
    }
    #sector {
        transform: skewX(135deg);
        transform-origin: 0 100%;
        position: absolute;
        right: 0;
        top: 0;
        background: red;
        width: 100px;
        height: 100px;
    }
  </style>

# html 结构
<div id="div">
  <div id="circle">
    <div id="sector"></div>
  </div>
 </div>

效果如下：

三角形

<style>
  .box{
    width: 0;
    height: 0;
    border-bottom: 100px solid blue;
    border-top: 100px solid transparent;
    border-left: 100px solid transparent;
    border-right: 100px solid transparent;
  }
</style>
<div class="box"></div>

效果如下：