css3border属性应用在多个方向，实现自适应三角形，属性

terry 2年前 (2023-09-27) 阅读数 51 #数据结构与算法

border是实际应用中经常使用的属性。 border属性除了用作边框之外，还可以利用border属性的一些特性和表现方式来实现一些常见的效果（比如等高布局、上下滚动固定内容的布局、绘制CSS图标等），一些更复杂的效果可以通过使用CSS3中新的属性值来实现（例如使用图像填充边框）。

本文不介绍外设属性的基本应用方法。会直接介绍一些常见的效果是如何通过周边属性来实现的。

使用边线绘制三角形、梯形等多边形

在 CSS 中，常规区域图像是矩形和圆形。但不可避免的有些情况我们需要使用CSS来绘制三角形、梯形、平行四边形等。此时，我们可以在渲染时使用一些边缘性能特征来实现这些功能。这是有关如何获得三角形的分步指南。
首先我们写一个div，样式如下

 .border {
     width: 200px;   
     height: 100px;   
     margin: 0 auto;   
     border-top: 40px solid red;   
     border-bottom: 40px solid green;   
     border-left: 40px solid yellow;   
     border-right: 40px solid blue;   
 }

浏览器显示效果如下：

我们发现通过为div的四个边缘设置不同的颜色，它的渲染性能形状是由四个梯形组成的框架。
如果我们将高度定义为0，那么显示结果如下：

如果将宽度设置为0，则结果如下：

至此，通过上面定义的不同样式，我们来对比一下，发现CSS中边框其实是渲染成梯形的（这可能和groove这样的3D效果的属性值有关，不过我没研究过这个）深入）。当元素的宽度和高度为0时，它就变成了四个压缩的三角形。因此，我们可以认为，如果将三个边的颜色定义为透明色透明，然后包裹在一个外容器中并放置overflow:hidden，那么我们就得到了一个等腰梯形或三角形。现在我们调整CSS如下：

 .trapezoid {
     width: 200px;   
     height: 0;      
     border-top: none;   
     border-bottom: 60px solid #249ff1;   
     border-left: 40px solid transparent;   
     border-right: 40px solid transparen;   
 }

我们得到如下的梯形：

设置样式如下：

 .triangle {
     width: 0;
     height: 0;
     border-top: 0 solid transparent;
     border-bottom: 100px solid #249ff1;
     border-left: 100px solid transparent;
     border-right: 100px solid transparent;
 }

我们得到如下的三角形：

因为所有的二维多边形都可以分割成多个三角形，加上border的基础知识，我们可以通过设置不同的边框宽度值和颜色以及使用伪元素或者拆分多个元素来实现更复杂的结果。对于某些图像，理论上我们可以使用 CSS 绘制任何多边形。比如多角星星、钻石以及我们常见的聊天气泡等等。下面是一些例子

使用边框实现左右栏等高的布局

在实际项目中我经常需要左右栏的布局，比如左侧菜单栏区域和右侧内容区为后台管理，布局类似京东的分类导航，如下图。

实现这种布局的方案有很多，比如使用padding和margin相互抵消。不过，如果使用边界来实现的话，或许可以让CSS更加简洁，具有更大的适用性和兼容性。例如，对于第一张图像的效果，我们有以下 HTML 结构。

<div class="menu">
    <ul>
        <li>首页</li>
        <li>商品管理</li>
        <li>营销中心</li>
        <li>会员管理</li>
        <li>系统设置</li>
    </ul>
</div>
<div class="content">这里是内容区域</div>

以及以下主要CSS：

.menu {
    float: left;
    width: 200px;
    color:  #FFF;
}
.content {
    border-left:  200px solid #40403b;/*这里是主要的样式*/
    padding: 20px;
    height: 1000px; /* 这里代表内容区域 */
}

因为边框宽度不支持百分比值，所以这种实现方法的缺点是很难直接按比例调整左右两侧的宽度。

在移动端使用边框实现固定的上下布局

在移动端应用中，页面的页眉和底部是固定的，中心内容区域是滚动的。这是一种常见的格式，如下所示。

实现这种布局的方式也有很多种。一般情况下使用上下固定定位（移动端固定定位与变换结合使用会导致键盘错位和bug，这个会单独写文章分析），然后使用margin，padding来实现这一点。但如果使用边界，则不仅可以实现简单的代码，而且可以实现高兼容性。核心样式是为内容区域添加透明的顶部和底部边框。顶部边缘的宽度等于头部的高度，底部边缘的宽度等于脚步的高度。如下：

header,footer {
    position: fixed;
    width: 100%;
    line-height: 50px;
    color: #FFF;
    background: #249ff1;
    text-align: center;
}
header {
    top: 0;
    left: 0;
}
footer {
    bottom: 0;
    left: 0;
}
.container {
    padding: 20px;
    background: #f3f3f3;
    height: 1000px; /*这里代表内容*/
    border-top: 50px solid transparent;/*上边框宽度等于header高度*/
    border-bottom: 50px solid transparent;/*下边框宽度等于footer高度*/
}

通过这个方法，我们在给图片添加水印的时候，还可以定位背景，比如水印的右下角和左上角。

使用边框颜色的技巧

因为当边框没有指定颜色时，边框颜色值等于标签的字体颜色值，所以我们可以使用此功能来创建某些效果。例如，对于带有边框的标签，正常情况下，边框和字体颜色为灰色，当鼠标悬停在其上时，边框和字体颜色为蓝色，如下：

正常情况下，我们使用伪元素来书写加号里面。当鼠标悬停在其上时，我们只需要改变a标签的字体颜色值即可同时改变伪元素的边框颜色值、字体颜色值和背景颜色值，只不过是使用该属性。代码如下所示。

a {
    position: relative;
    display: inline-block;
    padding: 30px 20px;
    color: #a7a7a7;
    border: 1px solid;
}
a:hover {
    color: #249ff1;
}
a:before,a:after {
    content: '';
    display: block;
}
a:after {
    border-top: 2px solid;
    width: 20px;
}
a:before {
    position: absolute;
    top:  20px;
    left:  29px;
    border-left: 2px solid;
    height: 20px;
}

实现自适应三角形

有时我们觉得需要创建如下图所示的自适应三角形效果。这是一个注册页面。设计需求如下：注册页面顶部的两个身份选择是两个灰色背景的矩形，宽度自适应。当选择其中一个身份时，会更改为蓝色背景的五边形。

这个需求可以使用SVG或CSS3的clip-path属性来实现，但是如果我们想使用边框来实现这一点该怎么办呢？

我们拆分了 UI 元素。分割方法有很多种。通常将活动形状分割为顶部的矩形和底部的等腰三角形。这样，可以使用伪元素和边框三角形来定义 CSS 样式。但问题来了：因为两个标签的宽度是自适应的，所以边框宽度的值也必须是自适应的。但是，边框宽度值不支持百分比。？？我们必须做什么？现在我们想出的第一个方法当然是使用js动态计算，但是有没有一种方法可以不使用js动态计算呢？我们可以画个图来分析。

假设三角形分割形成的矩形区域是父元素（图中蓝色部分），而实际三角形是相对于该元素定位的子元素或伪元素（这里如果伪元素使用图像横截面中的红色和蓝色），那么我们的标签只需要一个div。
如果我们想让三角形符合矩形，理想的状态应该是图像中红色和蓝色的交集（顶边+透明左右边实现的三角形）。因为borderwidth不支持百分比值，所以我们首先给borderwidth一个足够大的值。定位后，它就变成了图像中的红色三角形。对于溢出部分，我们可以在父级运行overflow:hidden，这样就可以实现自适应三角形。剩下的就是如何定位和设置这个值了。
我们假设父级的宽度为a，高度为b，三角形的顶边为y，左边和右边为x。定位前，A 点必须与 B 点重合。定位后，A 点与 B 点的相对位置为(-(x-0.5a),-(y-b))。此时又遇到一个问题，即x和y是固定的大值，a和b是百分比值，所以必须通过CSS计算来定位它们。这个可以通过CSS3的calc属性来解决，但是可能会出现兼容性问题。我们思考一下，换个角度。如果我们能够将A点相对于C、D的中点进行定位，那么相对位置就变成了(-x,-y)，问题就很容易解决了。我们把图片改成如下图：

如果我们把parent的高度设置为0，使用padding-top来扩展高度，设置宽度为0.5a，使用padding -left支撑另一个0.5a 将相对于点 P 定位点 A（点 P 当前是内容区域的左上角）。此时，A相对于P的位置为(-x,-y)。此时，可以通过以下样式来实现响应式三角形。 （注意左边缘与上边缘的比例，可以根据相似三角形特征计算）

<div></div>

div {
    width: 40%;
    padding-top: 8%;
    padding-left: 40%;/*宽高比为10:1*/
    overflow: hidden;
    border: 1px solid red;/*为方便观察显示*/
}
div:after {
    content:  '';
    display: block;
    width: 0;
    height: 0;
    border-left: 1500px solid transparent;/*足够大的边框宽度*/
    border-right: 1500px solid transparent;/*足够大的边框宽度*/
    border-top: 300px solid #249ff1;/*宽高比为10:1，即（1500+1500）: 300*/
    /*定位（-x,-y）*/
    margin-top: -300px;
    margin-left: -1500px;
}

效果如下：

采用这种方法，上面的注册页面的设计就是可以实现Tab标签。同时，通过调整不同的参数，可以实现不同类型的三角形。假设要定义的等腰三角形的底为2x，高为y。父级要求的宽度为2a，高度为b。那么各个值满足的关系如下：

 border-left = border-right = x = -margin-left;
 border-top / padding-top = x / a;
 margin-top = -border-top;
 至于border-left的取值则根据实际需要设置一个大值即可，
 而border-top与三角形的形状有关，即与a和b比例有关

下面是边界属性的一些特点和实际应用。未来将会更新更多功能和使用场景。

作者：掘金里的深海鱼
链接：https://juejin.im/post/5a162d3ff265da43062a6e27
来源：掘金
版权归作者所有。商业转载请联系作者获得许可。非商业转载请注明出处。