div{
margin: 50px;
width: 100px;
height: 100px;
background: red;
}
/* 半圆 */
.half-circle{
height: 50px;
border-radius: 50px 50px 0 0;
}
/* 扇形 */
.sector{
border-radius: 100px 0 0;
}
/* 三角 */
.triangle{
width: 0px;
height: 0px;
background: none;
border: 50px solid red;
border-color: red transparent transparent transparent;
}
/* 梯形 */
.ladder{
width: 50px;
height: 0px;
background: none;
border: 50px solid red;
border-color: red transparent transparent transparent;
}
作者:谢小飞
链接:https://juejin.im/post/5df1e312f265da33d039d06d
来源:掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
css border实现图形
最新推荐文章于 2024-04-10 23:15:12 发布