CSS画圆、三角形、品字、骰子
前言：这篇文章主要是本人正在看面试题，面试题当成八股文来背，太难了。所以，通过写笔记，并自己实践来加深印象。如果这篇文章 对你有帮助，请不要吝啬你的赞。😃
圆
让 border-radius属性的值等于盒子高度的一半就行(当然，盒子得是正方形才能得到圆，否则便不是圆)
三角形
原理：相邻边框均分
这是什么意思呢？
看下例子
可以知道，边框实际上应该是长方形或正方形的，但是第二个例子中，出现了梯形的边框，这就是因为有左边框，同时还有上下边框，但是位置是有限的，所以它们互相体谅，最后，每人拿一半。
那么，怎样才能用纯CSS画三角形呢？
首先，中间粉色的区域是一定要去掉的，所以让盒子没有宽高
可以看到，三角形已经出来了，那么，设置边框的颜色为透明，然后，只让一边的边框有颜色，就能画出三角形
满屏品字
上面一块使用 margin: 0 auto居中，下面两块要用 float或 inline-block控制不换行( inline-block可能还是会导致换行，因为可能会出现滚动条)
另外，需要满屏，所以上下应该各占50%，但是呢，默认的 html和 body高度为0，所以需要设置高度为 100%
骰子
主要是通过flex布局实现，flex布局的主要语法可查看本人写的另一篇(原本在个人博客上的，发到掘金上了)
一
一的情况比较简单，设置flex布局后，同时设置水平垂直居中即可。( just)
二
首先，通过 justify-content: space-between;，实现首元素在起点，尾元素在终点。
然后，通过 align-self: flex-end;把尾元素单独拖下来
.item:nth-child(2) {
align-self: flex-end;
}
三
三的做法和二类似，不同的是，三需要把第三个元素拖下来，而第二个元素应该在中间
四
四的情况麻烦一点点。
首先，html的结构需要增加上下两个中盒子。
然后，上下两个中盒子，分别要在大盒子的上下，所以大盒子需要设置主轴为垂直方向，并设置 justify-content: space-between;
最后，两个中盒子也得设置为 flex，因为它们的子元素也需要 justify-content: space-between;来实现，一人在左，一人在右。
item盒子的样式直接拿上面的即可
五
五和四类似，需要再来一个中盒子，然后让这个中盒子单独居中局可
六
六和四一摸一样做法
