css实现三角形

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

刘小妞

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

阅读量5.1k

点赞数 11

分类专栏： CSS(3) 文章标签： css

本文链接：https://blog.csdn.net/liuwengai/article/details/55222906

版权

CSS(3) 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

css可以实现各种各样的三角形，减少了切图加载图片，以下是各种三角形的实现方法。

1.首先设置一个盒子的三边为不同的颜色，看下边框是怎么显示的。

<html>
<head>
<style type="text/css">
#test{
    width:20px;
    height:20px;
    border-width:15px;
    border-style:solid;
    border-color:#e66161 #f3bb5b #94e24f #85bfda;
}
</style>

</head>
<body>
<div id="test">
</div>
</body>
</html>

显示效果如图所示：
这里写图片描述
可以看出每个边都是一个梯形

2.设置盒子的宽和高为0

#test{
    width:0px;
    height:0px;
    border-width:20px;
    border-style:solid;
    border-color:#e66161 #f3bb5b #94e24f #85bfda;
}

这里写图片描述

当盒子的宽和高都是0时，边框显示为三角形。由此可以看出，如何实现各种三角形。如果想实现倒三角，则其他的边为transparent，只设置最上面的边有颜色，则可以实现倒三角，同理可以实现各种三角形。

3.各种三角形的实现

（1）倒三角的实现

#test{
    width:0px;
    height:0px;
    border-width:20px;
    border-style:solid;
    border-color:green transparent transparent transparent;
}

这里写图片描述

（2）向上三角的实现（只需要保留下面的边）

#test{
    width:0px;
    height:0px;
    border-width:20px;
    border-style:solid;
    border-color:transparent transparent green transparent;
}

这里写图片描述

（3）向右三角的实现（保留左面的边）

#test{
    width:0px;
    height:0px;
    border-width:20px;
    border-style:solid;
    border-color:transparent transparent  transparent green;
}

这里写图片描述

（4）向左三角的实现（保留右面的边）

#test{
    width:0px;
    height:0px;
    border-width:20px;
    border-style:solid;
    border-color:transparent green transparent  transparent ;
}

这里写图片描述

（5）保留上边和右边组成三角形

#test{
    width:0px;
    height:0px;
    border-width:20px;
    border-style:solid;
    border-color:green green transparent  transparent ;
}

这里写图片描述

（6）

#test{
    width:0px;
    height:0px;
    border-left: 150px solid green;
    border-right: 150px solid green;
    border-bottom: 50px solid gray;
}

这里写图片描述

由于没有上边，所以左右的三角形都变成一半，只显示了下边部分。若只设置左右不设置上下，则左右的边无法显示。

刘小妞

关注

11
点赞
踩
49

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录