border-radius　②楕円弧: cssカスタマイズ

2018年07月04日

border-radius　②楕円弧

◆border-radiusで四隅の角を丸くする

width:400px;
height:400px;

◆個別指定　左上

width:400px;
height:400px;

border-top-left-radius:100px 200px;
・左上＝左右100px 上下200pxの楕円弧

◆個別指定　右上

width:400px;
height:400px;

border-top-right-radius:200px 100px;
・右上＝左右200px 上下100pxの楕円弧

◆個別指定　右下

width:400px;
height:400px;

border-bottom-right-radius:150px 300px;
・右下＝左右150px 上下300pxの楕円弧

◆個別指定　左下

width:400px;
height:400px;

border-bottom-left-radius:300px 150px;
・左下＝左右300px 上下150pxの楕円弧

◆一括指定　①

width:500px;
height:300px;

border-radius:100px/200px;
・左上＝右上＝右下＝左下＝左右100px 上下200pxの楕円弧

◆一括指定　②

width:500px;
height:300px;

border-radius:100px 200px/60px 120px;
・左上＝右下＝左右100px 上下60pxの楕円弧
・右上＝左下＝左右200px 上下120pxの楕円弧

◆一括指定　③

width:300px;
height:500px;

border-radius:25px 50px 75px/125px 100px 75px;
・左上＝左右25px 上下125pxの楕円弧
・右上＝左下＝左右50px 上下100pxの楕円弧
・右下＝左右75px 上下75pxの円弧

◆一括指定　④

width:300px;
height:500px;

border-radius:0px 25px 50px 75px/150px 125px 100px 75px;
・左上＝直角のまま
・右上＝左右25px 上下125pxの楕円弧
・右下＝左右50px 上下100pxの楕円弧
・左下＝左右75px 上下75pxの円弧

◆%指定　正方形は円弧になる

width:400px;
height:400px;

border-radius:10% 20% 30% 40%x;
・左上＝半径40pxの円弧
・右上＝半径80pxの円弧
・右下＝半径120pxの円弧
・左下＝半径160pxの円弧

◆%指定　長方形は楕円弧になる

width:500px;
height:300px;

border-radius:10% 20% 30% 40%;
・左上＝左右50px 上下30pxの楕円弧
・右上＝左右100px 上下60pxの楕円弧
・右下＝左右150px 上下90pxの楕円弧
・左下＝左右200px 上下120pxの楕円弧

◆50%で一括指定すれば長方形は楕円になる

　width:500px;
　height:300px;

　border-radius:50%;
　・左上＝右上＝右下＝左下＝左右250px 上下150pxの楕円

width:300px;
height:500px;

border-radius:50%;
・左上＝右上＝右下＝左下＝
　左右150px 上下250pxの楕円

posted by templayer at 12:56 | Comment(0) | TrackBack(0) | css