CSS实现画出多种图形

css的多用性

使用简单的css样式可以实现多种

• css画出三角形
• css画出原形
• css画出椭圆

---

css基本介绍

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
css主要用于控制页面显示的样式，用于和用户交互的第一现场，页面写的好不好看，css的使用至关重要

三角形

**主要代码如下：
div{
width:0px;
height:0px;
border-left:20px solid transparent;
border-right:20px solid transparent;
border-top:20px solid #000;
border-bottom:0px;
}

简单说明：首先设置个可见的div，四边分别设置相同px的border宽度，再将div的高度和宽度去掉，剩余四个border组成的四边形，上下或者左右选择两个边设置透明度 ，在取消一个border，便出现了三角形，这个transparent属性透明的意思。

圆形

**主要代码如下：
div{
width:100px;
height:100px;
border-radius:60px;
backgroud-color:#000;//黑色
}
设置border-radius即圆角为宽和高的一半即可。

椭圆

**主要代码如下：
div{
width:100px;
height:50px;
border-radius:100px/50px;
backgroud-color:#000;

}

border-radius:设置圆角，值可以有一到四个 分别设置top-left、top-right、bottom-right、bottom-left 。