详解css3使用border属性实现各种三角形及其他复杂图形的原理

最新推荐文章于 2023-06-07 10:35:00 发布

sfSam

最新推荐文章于 2023-06-07 10:35:00 发布

阅读量703

点赞数

分类专栏： HTML css

本文链接：https://blog.csdn.net/sfSam/article/details/84762565

版权

HTML 同时被 2 个专栏收录

26 篇文章 0 订阅

订阅专栏

css

11 篇文章 0 订阅

订阅专栏

最近看到网上有很多用css3实现三角形及各种复杂图形的代码，看到代码的时候一头雾水，索性用半天的时间好好研究了一下背后的实现原理。话不多说，先上代码：

<html>
<head>
<style type="text/css">
p{
 float:left;
margin-right:20px;
}
#triangle-full {
    width:0px;
    height:0px;
    border-left: 50px solid pink;
    border-bottom: 50px solid gray;
    border-top: 50px solid green;
    border-right: 50px solid red;
}
#triangle-lack-left {
    width:0px;
    height:0px;
    border-bottom: 50px solid gray;
    border-top: 50px solid green;
    border-right: 50px solid red;
}
#triangle-lack-right{
    width:0px;
    height:0px;
    border-left: 50px solid pink;
    border-bottom: 50px solid gray;
    border-top: 50px solid green;
}
#triangle-lack-top{
    width:0px;
    height:0px;
    border-left: 50px solid pink;
    border-bottom: 50px solid gray;
    border-right: 50px solid red;
}
#triangle-lack-bottom{
    width:0px;
    height:0px;
    border-left: 50px solid pink;
    border-top: 50px solid green;
    border-right: 50px solid red;
}
#triangle-has-left{
    width:20px;
    height:20px;
border-top: 50px solid pink;
     border-left: 50px solid pink;
     border-bottom: 50px solid gray;
}
#triangle-has-right{
    width:20px;
    height:20px;
     border-right: 50px solid pink;
     border-bottom: 50px solid gray;
}
#triangle-has-top{
    width:20px;
    height:20px;
     border-left: 50px solid pink;
     border-top: 50px solid gray;
}
#triangle-has-bottom{
    width:20px;
    height:20px;
     border-right: 50px solid pink;
     border-top: 50px solid gray;
}
#triangle-has-topbottom{
    width:0px;
    height:10px;
     border-bottom: 50px solid pink;
     border-top: 50px solid gray;
}
#triangle-has-onlyleft{
    width:10px;
    height:10px;
     background:black;
     border-left: 50px solid pink;
}
</style>
</head>
 
<body>
<p id="triangle-full"></p>
<p id="triangle-lack-left"></p>
<p id="triangle-lack-right"></p>
<p id="triangle-lack-top"></p>
<p id="triangle-lack-bottom"></p>
<div style="clear:both"></div>
<p id="triangle-has-left"></p>
<p id="triangle-has-right"></p>
<p id="triangle-has-top"></p>
<p id="triangle-has-bottom"></p>
<p id="triangle-has-topbottom"></p>
<p id="triangle-has-onlyleft"></p>
</body>
</html>

上面的代码运行结束后，总的显示结果为：

图（1）

是不是看到这个结果感觉既酷炫，又一头雾水？好，下面就一点一点的详细解释一下吧

先上图：

图二

如图二所示，从左到右分别为保留top、right、bottom、left四个border的显示；保留剩下的三个border,取消border-left、取消border-right、取消border-top、取消border-bottom其中一个方向border的显示

图三

如图三所示，从左往右依次为：

border-left+border-bottom+content、

border-right+border-bottom+content、

border-left+border-top+content、

border-right+border-top+content、

border-left+content

从上面的显示结果可以总结出：其实在css里可以把border也看成具体的具有宽、高的元素，利用css3通过border进行三角形制作的基本原理是利用了border的叠加和均分的原理。即：同一方向上的叠加，不同方向上的均分。同一方向上，比如上下border的高度叠加得到左右boder的高，左右border的宽度叠加得到上下border的宽。不同方向上，在左下、左上、右上、右下重叠的部分进行均分，所以可以看到上图一种第一幅图在矩形对角线位置的两边有不同的颜色。

具体对应的不同方向的border的尺寸的计算为：

border-left-width = border-left-width;

border-left-height = border-top-width+contentHeight+border-bottom-width;

border-right-width = border-right-width;

border-right-height = border-top-width+contentHeight+border-bottom-width;

border-bottom-width = border-left-width+contentWidth+border-right-width;

border-bottom-height = border-bottom-height;

border-top-width = border-left-width+contentWidth+border-right-width;

border-top-height = border-top-height;

有了上面的计算公式，我们来看一下在不同情况下的结果：

1、只有两条平行的border，比如border-left和border-right

此时会发现如果元素的内容区域的宽高为0的话【内容区域宽高不为0就可以显示啦】，border即使设置了width【假如为50px】属性也是不会显示的，为什么呢？