CSS绘制各种图形的方法

jk_v1 发布于2019-08-30 15:52 / 2347人阅读

摘要：绘制各种图形的方法正方形矩形圆形可以使用百分比值大于，但是低版本的不支持椭圆形可以使用百分比值大于，但是低版本的不支持向上的三角形向下向左向右

CSS绘制各种图形的方法

Square（正方形）

#square{
    width:100px;
    height:100px;
    backgroud:red;
}

Rectangle(矩形)

#rectangle {
    width: 200px;
    height: 100px;
    background: red;

Circle(圆形)

#circle {
    width: 100px;
    height: 100px;
    background: red;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    border-radius: 50px;
}

/ 可以使用百分比值(大于50%)，但是低版本的Android不支持 /

Oval(椭圆形)

#oval {
    width: 200px;
    height: 100px;
    background: red;
    -moz-border-radius: 100px / 50px;
    -webkit-border-radius: 100px / 50px;
    border-radius: 100px / 50px;
}

/ 可以使用百分比值(大于50%)，但是低版本的Android不支持 /

Triangle Up(向上的三角形)

#triangle-up {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid red;
}

Triangle Down(向下)

#triangle-down {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 100px solid red;
}

Triangle Left(向左)

 #triangle-left {
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-right: 100px solid red;
    border-bottom: 50px solid transparent;
}

Triangle Right(向右)

#triangle-right {
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-left: 100px solid red;
    border-bottom: 50px solid transparent;
}

专线服务超融合服务器图形绘制 Android绘制图形柱状图各种图形 html绘制图形代码

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/116409.html

前端图像处理指南

摘要：本文会介绍位图处理，矢量图和图像处理，重点是，并且最后会附上一个小应用。以上列举部分，更多备胎在此矢量图处理讲完位图再说矢量图。矢量图在绘制图标商业动画元素上应用非常广范。计算机图像处理是一门很成熟的技术，任何一门可操作系统接口的语言都能很轻易的实现各种处理操作。但是前端限于浏览器环境和接口限制，处理起来会有诸多不便，这里所说的前端图像处理，是真的指不借助任何后端服务纯前端实现的图像...

Anshiii 2019-08-30 13:21 评论0 收藏0
前端图像处理指南

摘要：本文会介绍位图处理，矢量图和图像处理，重点是，并且最后会附上一个小应用。以上列举部分，更多备胎在此矢量图处理讲完位图再说矢量图。矢量图在绘制图标商业动画元素上应用非常广范。计算机图像处理是一门很成熟的技术，任何一门可操作系统接口的语言都能很轻易的实现各种处理操作。但是前端限于浏览器环境和接口限制，处理起来会有诸多不便，这里所说的前端图像处理，是真的指不借助任何后端服务纯前端实现的图像...

CatalpaFlat 2019-08-20 13:33 评论0 收藏0
前端图像处理指南

摘要：本文会介绍位图处理，矢量图和图像处理，重点是，并且最后会附上一个小应用。以上列举部分，更多备胎在此矢量图处理讲完位图再说矢量图。矢量图在绘制图标商业动画元素上应用非常广范。计算机图像处理是一门很成熟的技术，任何一门可操作系统接口的语言都能很轻易的实现各种处理操作。但是前端限于浏览器环境和接口限制，处理起来会有诸多不便，这里所说的前端图像处理，是真的指不借助任何后端服务纯前端实现的图像...

yanbingyun1990 2019-08-05 10:38 评论0 收藏0
css绘制各种各样的形状图形

摘要：我们在编写前端代码时，经常会遇到各种各样的形状图形如边框对话框，三角形，平行四边形圆角边框圆形四叶草花瓣等，除了用背景图片雪碧图或精灵图定位引用和插入图片的方法，我们还可以用边框圆角渐变和定位的方法结合使用，绘制各种各样的形状图形。我们在编写前端代码时，经常会遇到各种各样的形状图形（如：边框对话框，三角形，平行四边形、圆角边框、圆形、四叶草、花瓣等），除了用背景图片（css雪碧图或c...

mingde 2019-08-02 11:37 评论0 收藏0
css绘制各种各样的形状图形

摘要：我们在编写前端代码时，经常会遇到各种各样的形状图形如边框对话框，三角形，平行四边形圆角边框圆形四叶草花瓣等，除了用背景图片雪碧图或精灵图定位引用和插入图片的方法，我们还可以用边框圆角渐变和定位的方法结合使用，绘制各种各样的形状图形。我们在编写前端代码时，经常会遇到各种各样的形状图形（如：边框对话框，三角形，平行四边形、圆角边框、圆形、四叶草、花瓣等），除了用背景图片（css雪碧图或c...

levinit 2019-08-30 15:54 评论0 收藏0