css可以绘制哪些常见的特殊形状？

天心天地生

于 2019-10-07 21:03:46 发布

阅读量321

点赞数 1

分类专栏： # CSS深度思考文章标签： css

本文链接：https://blog.csdn.net/tianxintiandisheng/article/details/102328164

版权

CSS深度思考专栏收录该内容

65 篇文章

订阅专栏

为什么使用CSS绘制图形

在写网页的时候，会遇到需要装饰一些几何图形的情况，用css就可以实现很多特殊形状的绘制。它的特点是放大后图像不会失真，档案的占用空间较小，也可以减少http的请求。

CSS绘制图形

圆形/椭圆形

.circle{

width:10rem;

height:10rem;

border-radius:50%;

background:orange;

}

椭圆形只需改变矩形的边长

三角形/梯形

.triangle{

margin-top:5rem;

width:0;

border-bottom:5rem solid#00a000;

border-left:5rem solid transparent;

border-right:5rem solid transparent;

}

梯形只需设定width的值即可

平行四边形

.parallelogram{

margin:5rem;

width:10rem;

height:5rem;

transform:skew(30deg);

background:orange;

}

更为清爽的浏览体验,请移步我的个人博客
天心天地生的个人博客