css多种方法画四分之一圆曲线

写这道题是之前面试时碰到的题目,在这给大家分享几种画四分之一圆曲线方法:
1、设置上、右边框,然后对右上角设置圆角

    width: 100px;
	height: 100px;
	border-top:1px solid red;
	border-right: 1px solid red;
	border-top-right-radius: 100%;

2.使用 clip:rect(0 50px 0 0) ,使用clip裁剪的前提,该元素的position必须为脱离文档流才会生效。
3.第三种方法,跟第一种的思路差不多

    width: 50px;
	height: 50px;
	border: 1px solid black;
	border-right-width: 0;
	border-bottom-width: 0;
	border-radius: 50px 0 0 0;

使用clip-path裁切。注意:不支持IE和Firefox,支持webkit浏览器。

    width: 100px;
	height: 100px;
	border: 1px solid red;
	border-radius: 50%;
	-webkit-clip-path: circle(50% at 100% 0%);
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
1. 形: 使用 CSS3 的 border-radius 属性,将宽高设置为相等的值即可创建形。 示例代码: ```css .circle { width: 100px; height: 100px; border-radius: 50%; } ``` 2. 环: 在形的基础上,添加 border 属性控制边框宽度和颜色。 示例代码: ```css .ring { width: 100px; height: 100px; border-radius: 50%; border: 10px solid #000; } ``` 3. 半: 使用 CSS3 的 border-radius 属性,将宽度设置为高度的两倍,再设置 border-bottom-left-radius 和 border-bottom-right-radius 的值为 0,即可创建半。 示例代码: ```css .half-circle { width: 100px; height: 50px; border-radius: 100px 100px 0 0; } ``` 4. 四分之一: 在半的基础上,再设置 border-top-left-radius 的值为 0,即可创建四分之一。 示例代码: ```css .quarter-circle { width: 50px; height: 50px; border-radius: 0 50px 0 0; } ``` 5. 扇形: 在形的基础上,使用伪元素 ::before 和 ::after 创建两个三角形,再使用 transform 属性旋转其中一个三角形,即可创建扇形。 示例代码: ```css .sector { position: relative; width: 100px; height: 100px; border-radius: 50%; overflow: hidden; } .sector::before, .sector::after { content: ""; position: absolute; top: 0; left: 0; width: 50%; height: 100%; background-color: #000; transform-origin: 100% 50%; } .sector::before { transform: rotate(30deg); } ``` 以上是几种常见的 CSS3 形、环、半四分之一、扇形的实现方法

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值