CSS实现画出多种图形

css的多用性

使用简单的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 。

八卦图

**主要代码如下：

div{    
    width: 0px;
    height: 0px;
	border-left:50px solid #fff;
	border-right:50px solid #fff;
	border-top:50px solid #000;
	border-bottom:50px solid #000;
	border-radius:50px;
	transform: rotate(45deg)
}

border-radius:设置圆角，圆角值和border值一样，便会出现⚪ ，颜色区分开，效果图如下

正方形变色环

**主要代码如下：

div1 {
  position: relative;
  width: 180px;
  height: 180px;
  background: #9c27b0;
  border: 50px dashed #2196f3;
  /* background-clip: content-box; 默认为border-box*/  图片显示范围  border-box 则从border开始显示
}

div1::after {
  content: "";
  position: absolute;
  top: 0px;
  left: 0px;
  bottom: 0px;
  right: 0px;
  background: #fff;
}

这里使用了伪元素 ::after 使用伪元素遮盖住内框的background ，这里设置 top left bottom 和 right 是为了使方块离所有边框的距离一致。效果图如下：

先写到这里，后续的再慢慢补充吧