用css来实现一个三角形或扇形

最新推荐文章于 2022-07-26 19:52:06 发布

全靠一口仙气吊着i

最新推荐文章于 2022-07-26 19:52:06 发布

阅读量524

点赞数 1

本文链接：https://blog.csdn.net/dd602350527/article/details/106725282

版权

css来实现一个三角形或扇形

1.css实现一个三角形


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
 <style>
     div{
         height: 0;
         width: 0;
         border-width: 50px;
         border-style: solid;
         border-color:  transparent #ff0 transparent transparent;
     }
 </style>
<body>
    <div></div>
</body>
</html>

思路: border有4个边,在没有宽高的情况下,每个边其实都会变成一个三角形,我们需要哪个,就把哪个三角形设成我们想要的颜色,其余的为透明色(transparent)

2.css实现一个扇形


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
 <style>
     div{
         height: 0;
         width: 0;
         border-width: 50px;
         border-style: solid;
         border-color:  transparent #ff0 transparent transparent;
         border-radius: 50%;
     }
 </style>
<body>
    <div></div>
</body>
</html>

思路: 和实现一个三角形思路是一样的,只是多了一个圆角

全靠一口仙气吊着i

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
用css来实现一个三角形或扇形

css实现一个扇形或三角形1.css实现一个三角形<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head> &l
复制链接

扫一扫