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