【CSS实战】基于css实现三角形、扇形

最新推荐文章于 2023-08-10 11:19:29 发布

想做一只快乐的修狗

最新推荐文章于 2023-08-10 11:19:29 发布

阅读量291

点赞数 1

文章标签： css 前端 html 三角形扇形

本文链接：https://blog.csdn.net/weixin_44109827/article/details/126256427

版权

1. 三角形

1.1 思路

先绘制一个正方形
然后将其分成4个三角形，利用transparent将其他3个三角形的颜色设置为透明即可；

1.2 代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .triangles {
            width: 0;
            height: 0;
            border-width: 100px;
            border-style: solid;
            border-color: transparent transparent pink transparent;
        }
    </style>
</head>
<body>
    <div class="triangles"></div>
</body>
</html>

1.3 效果

在这里插入图片描述
高度为100px的三角形

2. 扇形

2.1 思路

绘制一个圆形
通过transparent将圆形的颜色设置为透明
圆形被分成4个扇形
使用border-方向-color属性设置一个颜色即可

2.2 代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .sector {
            width: 0;
            height: 0;
            border: 100px solid transparent;
            border-radius: 50%;
            border-left-color: pink;
        }
    </style>
</head>
<body>
    <div class="sector"></div>
</body>
</html>