用css实现三角形
2022-08-14 本文已影响0人
璃安_
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的像素值即可
