此篇文章介绍CSS利用边框实现正三角形以及具体应用,所有代码在最后附上。
前言
最近在学 HTML CSS,关于 CSS 边框实现三角形的原理和进阶技巧进行一些说明,希望对大家有些许帮助
提示:以下是本篇文章正文内容,下面案例可供参考
一、CSS 边框实现三角形原理
盒子模型由外边距、边框、内边距、内容,四部分组成,边框 border 本身就是一个梯形,下底由你设置的 border-width 决定,上底由盒子的内容来决定。
.box1 {
/* 盒子内容宽高 */
width: 30px;
height: 30px;
border-color: red green blue gray;
border-style: solid;
/* 盒子边框的宽度 */
border-width: 50px;
}
![](https://i-blog.csdnimg.cn/blog_migrate/dc10733fa3aa62317a965eacdcd3245d.png)
当我们将内容设置为0的时候,这时候边框就是充满盒子,并且每个边框都是一个三角形。我们想要的三角形就得到了,此时只需要设置相应边框为透明色,将其在视觉上隐藏起来,就可以得到我们需要的特定方向的三角形了。
.box {
width: 0;
height: 0;
/* 考虑一些低版本浏览器的兼容性问题 */
line-height: 0;
font-size: 0;
/* 当盒子宽高都是0,设置边框的时候,盒子由边框组成 */
border-color: red green blue gray;
border-style: solid;
border-width: 50px;
}
![](https://i-blog.csdnimg.cn/blog_migrate/8dec038ff746cf7605a7411a2303aa16.png)
这时候我们只需要隐藏三个边框的颜色就可以得到想要的三角形了,注意隐藏是边框颜色,不是设置宽度为0。
.box {
width: 0;
height: 0;
/* 考虑一些低版本浏览器的兼容性问题 */
line-height: 0;
font-size: 0;
/* 先给四个边框设置颜色为透明色,需要哪个方向的边框,再单独设置哪个边框的颜色即可 */
border: 50px solid transparent;
/* 朝右的三角形 */
border-left-color: gray;
}
![](https://i-blog.csdnimg.cn/blog_migrate/d42fe3fcabbb79cb306bad13e5f3f7a0.png)
其余方向的三角形也是同理的。
二、进阶技巧:定位与CSS三角联合使用
使用定位和CSS三角就可以制作网站上常见的样式
![](https://i-blog.csdnimg.cn/blog_migrate/89329e7a9c445bcfe6d29f1550d89c43.png)
首先我们可以准备一个盒子 div,里面放一个 span 用作制作三角形,通过使用子绝父相,就可以实现类似的样式。废话不多说,直接上代码:
/* 这是部分代码,全部代码放在最后 */
<div class="tb">
<span></span>
</div>
/* CSS 部分 */
.tb {
/* 子绝父相,让三角形盒子相对于父元素定位 */
position: relative;
width: 300px;
height: 180px;
background-color: palegreen;
}
.tb span {
/* 右三角,使用子绝父相制作,移动到盒子边上即可 */
position: absolute;
top: 15px;
/* 我们只是在视觉上将另外三个边框隐藏掉了,盒子的大小仍然是边框宽度的2倍 */
right: -20px;
width: 0;
height: 0;
border: 10px solid transparent;
border-left-color: palegreen;
}
最终,我们就可以得到下面的效果图:
![](https://i-blog.csdnimg.cn/blog_migrate/ae225f08fc53a312a6c130dc76377a39.png)
总结
以上就是自己的理解,欢迎指正。下面将全部代码奉上,直接复制下来新建一个.html文件就可以使用啦。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>204-CSS三角制作</title>
<style>
h3 {
font-weight: 400;
}
.box {
width: 0;
height: 0;
/* 考虑一些低版本浏览器的兼容性问题 */
line-height: 0;
font-size: 0;
/* 当盒子宽高都是0,设置边框的时候,盒子由边框组成 */
border-color: red green blue gray;
border-style: solid;
border-width: 50px;
}
.box1 {
/* 必须设置盒子的宽高都是0 */
width: 0;
height: 0;
/* 先给四个边框设置颜色为透明色,需要哪个方向的边框,再单独设置哪个边框的颜色即可 */
border: 50px solid transparent;
}
.top {
border-bottom-color: red;
}
.bottom {
border-top-color: red;
}
.left {
border-right-color: red;
}
.right {
border-left-color: red;
}
/* ----------------------------------------------------------------- */
.tb {
position: relative;
width: 300px;
height: 180px;
background-color: palegreen;
}
.tb span {
position: absolute;
top: 15px;
right: -20px;
width: 0;
height: 0;
border: 10px solid transparent;
/* 右三角,使用子绝父相制作,移动到盒子边上即可 */
border-left-color: palegreen;
}
.jd {
position: relative;
width: 180px;
height: 300px;
background-color: skyblue;
}
.jd span {
position: absolute;
top: -20px;
right: 15px;
width: 0;
height: 0;
border: 10px solid transparent;
border-bottom-color: skyblue;
}
</style>
</head>
<body>
<h3>1. CSS三角形制作的原理</h3>
<div class="box"></div>
<h3>2. 上三角制作</h3>
<div class="box1 top"></div>
<h3>3. 下三角制作</h3>
<div class="box1 bottom"></div>
<h3>4. 左三角制作</h3>
<div class="box1 left"></div>
<h3>5. 右三角制作</h3>
<div class="box1 right"></div>
<h3>6. 淘宝三角制作</h3>
<div class="tb">
<span></span>
</div>
<h3>7. 京东三角制作</h3>
<div class="jd">
<span></span>
</div>
</html>