用css实现三角形

html代码

<div class="h"></div>

css代码

<style>

        .h {

            width: 0;

            height: 0;

            border: 50px solid;

            border-top-color: skyblue;

        }

    </style>

效果图

如果只需要看到蓝色部分，则需隐藏黑色部分，那么在css样式里面添加transparent就可以了，在css中transparent 它代表着全透明黑色，即一个类似rgba(0,0,0,0)这样的值，代码和效果图如下：

<style>

        .h {

            width: 0;

            height: 0;

            border: 50px solid transparent;

            border-top-color: skyblue;

        }

    </style>

其他方向三角形例1：

.h {

            width: 0;

            height: 0;

            border: 50px solid transparent;

            /* border-top-color: skyblue; */

            border-left-color: aquamarine;

        }

    </style>

需要其他方向的三角形只需要改变上面代码当中的斜体部分即可（top,left,right,bottom）

如果是需要更改大小只需要改变代码当中border的像素值即可