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盒子的样式直接拿上面的即可

五

五和四类似，需要再来一个中盒子，然后让这个中盒子单独居中局可

六

六和四一摸一样做法