CSS-画基本图形

1. border属性

画基本图形之前，先来介绍一下border的属性：

1. 定义：border是用来指定元素边框的样式和颜色。
2. 属性值：
   border-width：
border-style：
border-color：
   可以设置的颜色：

值	描述
border-width	规定边框的宽度。
border-style	规定边框的样式。
border-color	规定边框的颜色。
inherit	规定应该从父元素继承 border 属性的设置。

值	描述
thin	定义细的边框。
medium	默认。定义中等的边框。
thick	定义粗的边框。
10px	自定义边框的宽度。
inherit	规定应该从父元素继承边框宽度。

值	描述
none	定义无边框。
hidden	与 “none” 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。
dotted	定义点状边框。在大多数浏览器中呈现为实线。
dashed	定义虚线。在大多数浏览器中呈现为实线。
solid	定义实线。
double	定义双线。双线的宽度等于 border-width 的值。
groove	定义 3D 凹槽边框。其效果取决于 border-color 的值。
ridge	定义 3D 垄状边框。其效果取决于 border-color 的值。
inset	定义 3D inset 边框。其效果取决于 border-color 的值。
outset	定义 3D outset 边框。其效果取决于 border-color 的值。
inherit	规定应该从父元素继承边框样式。

• name：指定颜色的名称，如 “red”。
• RGB：指定 RGB 值, 如 “rgb(255,0,0)”。
• Hex：指定16进制值, 如 “#ff0000”。
• transparent：设置为透明。

注意： border-color单独使用是不起作用的，必须得先使用border-style来设置边框样式。
border属性值简写为：border:5px solid red;，按照宽度、样式、颜色的顺序。
border属性也可以单独设置某一边的属性值，例如：border-top-style:solid;

2. 画图形

正方形和长方形

画正方形和长方形，只需直接设置其width和height即可。

也可以用border属性画正方形，如下：

#square {
            width: 0;
            height: 0;
            border: 50px solid;
        }

三角形

当我们设置属性如下时：

#triangle {
            width: 0;
            height: 0;
            border-top: 40px solid powderblue;
            border-right: 40px solid pink;
            border-left: 40px solid bisque;
            border-bottom: 40px solid grey;
        }

会看见如图所示的四个三角形：

所以我们画一个朝上的三角形，只需更改代码如下：

#triangle {
            width: 0;
            height: 0;
            /* border-top: 40px solid powderblue; */
            border-right: 40px solid transparent;
            border-left: 40px solid transparent;
            border-bottom: 40px solid grey;
        }

会看见如图所示的一个三角形：

如果需要画出朝向不同方向的三角形，只需将三角形顶点方向的属性值注释掉，与顶点对应的方向设置为需要的颜色，其它两边颜色设置为transparent即可。其它属性值根据需要进行设置。

圆形和椭圆形

width和height的值相同即为圆形，值不相同即为椭圆形。

#circle {
            width: 100px;
            height: 100px;
            background: pink;
            border-radius: 50%；
        }