css绘画扇形

最新推荐文章于 2024-12-16 23:12:55 发布

一枚前端猿

最新推荐文章于 2024-12-16 23:12:55 发布

阅读量5.2k

点赞数 2

本文链接：https://blog.youkuaiyun.com/qq_42535651/article/details/108964526

版权

css中绘画半圆形：

    <div class="semi-sector"></div>

	 .semi-sector {
      height: 50px;
      width: 100px;
      border-radius: 50px 50px 0 0; /* border-radius 要等于圆的半径*/
      background-color: red;
    }

在这里插入图片描述

css绘画任意角度的扇形：

思路：
先画一个圆，然后再用 absolute 绝对布局画两个半圆，然后 rotate 旋转两个半圆，注意使用 transform-origin 设置好圆心。

    <div class="circle"></div>
    <div class="sector1"></div>
    <div class="sector2"></div>

    body {
      margin: 0;
    }
    .circle {
      width: 100px;
      height: 100px;
      border-radius: 100px;
      background-color: red;
    }
    .sector1 {
      transform-origin: 50px 50px;
      transform: rotate(90deg);
      position: absolute;
      top: 0px;
      left: 0px;
      width: 100px;
      height: 50px;
      background-color: white;
      border-radius: 50px 50px 0 0;
    }
    .sector2 {
      transform-origin: 50px 50px;
      transform: rotate(120deg);
      position: absolute;
      top: 0px;
      left: 0px;
      width: 100px;
      height: 50px;
      background-color: white;
      border-radius: 50px 50px 0 0;
    }