三角形css_用CSS做三角形

试了几种情况：

a、在块级元素上通过设置四边都是透明，然后宽高都是0px，只流出需要的宽高和颜色即可，代码比较少，推荐该方法。

b、在块级元素上通过分别设置四边的透明和颜色，宽高设置都是0px。

c、在内联元素上通过设置四边都是透明，然后宽高都是0px，只流出需要的宽高和颜色即可。但是这里增加position:abolute;

高度和宽度注释掉，并且有内容的前提下就会出现一些问题。

注释掉宽高后，没有内容的前提下a和c还可以出现三角形，但是b就不可以。

如果想三角形固定在父级元素结束的位置，需要使用position。

没有使用position的前提下，可以看到三角形跑到父级元素里面去了。

如果修改在红色边框下面出现。

在子元素.a里面使用position:absolute;

在父元素nav里面使用position:relative；就可以达到效果。

使用绝对定位：脱离文档流，但是还是相对于父元素定位。

在子元素.a里面使用position:absolute;

在父元素nav里面使用position:relative；就可以达到效果。这样.a就相对于祖先的第一个position：relative，也就是nav定位。这个情况是父级元素没有padding内边框的前提下使用。

如果父级元素有padding内边框的前提下。通过绝对定位后还是会在父级元素里面，还需要通过top/bottom或者left/right来调整。

通过增加top：100%（意思是距离顶部100%父级元素的高度）和left：0%（意思是距离左边0%父级元素的宽度）

---

使用推荐的a方法可以变换更多的形状：

另外推荐一个网站有更多用CSS来做图形参考：

The Shapes of CSS | CSS-Tricks​css-tricks.com

本文为本人的原创文章，著作权归本人和饥人谷所有，转载务必注明来源