CSS + HTML 如何去实现一个扇形

最新推荐文章于 2024-04-15 20:05:25 发布

我已经超鬼了

最新推荐文章于 2024-04-15 20:05:25 发布

阅读量818

点赞数

分类专栏：前端文章标签： css html 前端

本文链接：https://blog.youkuaiyun.com/weixin_40795574/article/details/132320008

版权

前端专栏收录该内容

20 篇文章

订阅专栏

本文介绍了两种在CSS和HTML中创建扇形的方法：方案一是利用`transform-skewY`属性配合`border-radius`，方案二是使用`clip-path`和三角函数计算裁切点。通过示例代码展示了具体实现步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS + HTML 如何去实现一个扇形

方案一

描述

示例：https://codesandbox.io/s/shan-xing-shewy-tx4rfq
使用两层 div，外层【circleBlock】通过 border-radius: 50%;overflow: hidden 来限制展示区域，内层【circle】通过 transform skewY 变型属性基于 transform-origin 设置的左下角的基准点进行压缩变形，如需要60度的扇形，则 skewY 的变形角度为90 - 60 = 30度
在这里插入图片描述

代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>transform skewY</title>
    <style>
        .circleBlock {
            width: 200px;
            height: 200px;
            position: relative;
            overflow: hidden;
            border-radius: 50%;
        }

        .circle {
            width: 50%;
            height: 50%;
            position: absolute;
            top: 0;
            right: 0;
            transform-origin: 0% 100%;
            overflow: hidden;
			background: #6C609E;
            transform: skewY(-38.57deg);
        }
    </style>
</head>

<body>
    <div class="circleBlock">
        <div class="circle"></div>
    </div>
</body>

</html

方案二

描述

示例：https://codesandbox.io/s/shan-xing-clip-path-4ckmcq?file=/index.html
一个div使用 clip-path 从圆心向四个边进行裁切，并使用 border-radius: 50% 隐藏多余内容，裁切点基于角度使用三角函数 sin cos tan 计算得来
在这里插入图片描述

代码

<!DOCTYPE html>
<html>
  <head>
    <title>CSS等分圆</title>
    <meta charset="utf-8" />
    <style type="text/css">
      .circle {
        background-color: #6c609e;
        width: 200px;
        height: 200px;
        border-radius: 50%;
        clip-path: polygon(50% 50%, 20% 0%, 80% 0%);
      }
    </style>
  </head>
  <body>
    <div class="circle"></div>
  </body>
</html>