写这道题是之前面试时碰到的题目,在这给大家分享几种画四分之一圆曲线方法:
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%);