css3实现三角形（上下左右）

最新推荐文章于 2024-08-21 11:59:03 发布

置顶前端小怪兽-凯龙

最新推荐文章于 2024-08-21 11:59:03 发布

阅读量9.7w

点赞数 27

分类专栏： css3 文章标签： css3 css

本文链接：https://blog.csdn.net/qq_34382449/article/details/81234653

版权

css3 专栏收录该内容

1 篇文章 1 订阅

订阅专栏

实现三角形的绘制很简单。

第一步：新建一个div。

<div class="kailong"></div>

第二步：为盒子添加样式。

1.向上

.kailong{
	width:0;
        height:0;
	border-right:50px solid transparent;
	border-left:50px solid transparent;
	border-bottom:50px solid red;
}

2.向下

.kailong{
	width:0;
	height:0;
	border-right:50px solid transparent;
	border-left:50px solid transparent;
	border-top:50px solid red;
}

3.向左

.kailong{
    width:0;
    height:0;
    border-top:50px solid transparent;
    border-bottom:50px solid transparent;
    border-right:50px solid red;
}

4.向右

.kailong{
    width:0;
    height:0;
    border-top:50px solid transparent;
    border-bottom:50px solid transparent;
    border-left:50px solid red;
}