css实现一个扇形或三角形

本文介绍了如何使用CSS来实现扇形和三角形的绘制。通过调整边框颜色和透明度,可以创建出所需的几何形状。对于三角形,利用边框的特性,只保留一个颜色边,其他边设置为透明。而对于扇形,则是在三角形的基础上添加了圆角效果。

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

css实现一个扇形或三角形

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)

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>

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

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值