css实现上、下、左、右方向的三角形

最新推荐文章于 2024-06-28 10:00:28 发布

原创最新推荐文章于 2024-06-28 10:00:28 发布 · 809 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #css3

本文介绍了一种使用CSS边框属性来绘制不同颜色组成的三角形的方法，并通过调整宽度、高度及透明度实现了特定方向的三角形展示。

1、首先绘制一个边框分别为四种颜色的三角形

<div class="square"></div>
.square {
    width: 200px;
    height: 200px;
    border: 50px solid ;
    border-left-color: red;
    border-right-color: orange;
    border-top-color: greenyellow;
    border-bottom-color: purple;
 }

效果如图
在这里插入图片描述
2、分别将width和height设置为0，此时正方形由四个不同颜色的等腰三角形组成。

3、实现一个方向向下的三角形：只需要将其他三个方向的颜色设置成transparent即可啦

.square {
    width: 0px;
    height: 0px;
    border: 50px solid ;
    border-left-color: transparent;
    border-right-color: transparent;
    border-top-color: greenyellow;
    border-bottom-color: transparent;
  }