【CSS】带边框的三角形（position）

学习委员

关注

发布于: 2021 年 01 月 21 日

思路是将 2 个三角形叠加起来，外层的三角形稍微大一些。

思路和【CSS】内圆角（box-shadow、outline）这个笔记的 “方法一” 类似。

这个笔记最后会补充【CSS】画三角形（border）这个笔记里记漏的一点。

<div class="parent">  <div class="child"></div></div>
<style>.parent {  width: 0px;  height: 0px;  border-width: 0 100px 100px;  border-style: solid;  border-color: transparent transparent #333;  position: relative;}
.child {  width: 0px;  height: 0px;  border-width:0 90px 90px;  border-style:solid;  border-color:transparent transparent #fc0;			  position: absolute;  top: 6px;  left: -90px;}</style>

复制代码

以上是最终代码。

注意加粗部分。

逐步分析：

<style>.parent {  width: 0px;  height: 0px;  border-width: 0 100px 100px;  border-style: solid;	border-color: transparent transparent #333;}
.child {  width: 0px;  height: 0px;  border-width:0 90px 90px;  border-style:solid;  border-color:transparent transparent #fc0;			}</style>

复制代码

一开始的思路是分别生成外层和内层的三角形。得到的效果如下图所示。

之所以会出现这种情况，是因为内层嵌套的元素，会在外层元素的正式内容部分开始出现。看看下面的盒子模型。

嵌套的内容，都会从黄色框（content）的左上角开始出现。

再看下图：

根据红色的指示线可以看得出，黄色三角形左边的角和黑色三角形上面的角是在同一水平线上的。所以黄色三角形（嵌套的）应该向左移动。

向左移动距离 = 黄色三角形 border 的值。

左负右正

向下移动距离 = （黑 border - 黄 border）/ 2 +1

上负下正

最后回顾一下 border 的用法

border 可以一次设置 4 条边的所有属性，

如：

border: 1px solid #eee;

复制代码

这就把 4 条边都设置成 1 像素的实线，且颜色为灰色。

可以把所有属性分开设置，

如：

border-width: 10px;

复制代码

这就把 4 条边都设置成 10px。

可以分别设置 4 条边同一属性的不同值，并写在同一行代码里。

如：

border-width: 1px 2px 3px 4px;

复制代码

对应是顺序是：上右下左

如果只设置两个值，如：

border-width: 1px 3px;

复制代码

对应：上下左右

如果只设置三个值，如：

border-width: 1px 2px 3px;

复制代码

对应：上左右下。

即：上 1px 左右 2px 下 3px

发布于: 2021 年 01 月 21 日阅读数: 27

学习委员

关注

反派 2019.03.19 加入

哈哈哈哈哈哈哈哈哈哈哈哈哈哈

发布

暂无评论

创作场景

【CSS】带边框的三角形（position）

学习委员

评论