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%);

你可能感兴趣的:(css多种方法画四分之一圆曲线)