前言、
在前端开发的时候,我们有很多地方都会用到三角形的形状,比如地址选择或者播放器里面播放按扭,在通常情况下我们会使用图片或svg去完成那些功能。但是有想过如何去用css完成三角形形状吗?
其实实现过程并不复杂,一起来过一遍实现过程吧。
实现过程
步骤一、
首先第一步,搭出盒子模型,给它加上边框。
<!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>Document</title>
<style>
.triangle {
width: 50px;
height: 50px;
border: 2px solid;
border-color: #3fed9c #d8b423 #06433c #0ca9f1;
}
</style>
</head>
<body>
<div class="triangle"></div>
</body>
</html>
复制代码
如下图所示:
步骤二、
将盒子的border设置为50px 变更代码如下:
.triangle {
width: 50px;
height: 50px;
border: 50px solid;
border-color: #3fed9c #d8b423 #06433c #0ca9f1;
}
复制代码
如下图所示:
步骤三、 此时中间白色的区域就是宽高(height,width)只要将他们设置为0就可以得到四个三角形 变更代码如下:
.triangle {
width: 0;
height: 0;
border: 50px solid;
border-color: #3fed9c #d8b423 #06433c #0ca9f1;
}
复制代码
如下图所示:
步骤四、 虽然完成了以上方式可以达到视觉上实现了三角形,但实际上,隐藏的部分任然占据部分高度,需要将上方的宽度去掉,然后再将两侧的颜色设置透明。变更代码如下:
.triangle {
width: 0;
height: 0;
border-style: solid;
border-width: 0 50px 50px;
border-color: transparent transparent #06433c;
}
复制代码
实现一个空心的三角形
<style>
.triangle {
width: 0;
height: 0;
border-style: solid;
border-width: 0 50px 50px;
border-color: transparent transparent #06433c;
position: relative;
}
.triangle::after {
content: '';
border-style: solid;
border-width: 0 40px 40px;
border-color: transparent transparent #04be9c;
position: absolute;
top: 0;
left: 0;
}
</style>
复制代码
如果想要实现一个只有边框是空心的三角形,由于这里不能再使用border
属性,所以最直接的方法是利用伪类新建一个小一点的三角形定位上去。效果图如下:
伪类元素定位参照对象的内容区域宽高都为0,则内容区域即可以理解成中心一点,所以伪元素相对中心这点定位
将元素定位进行微调以及改变颜色,就能够完成下方效果图:
最终全局效果代码(空心三角形)
<!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>Document</title>
<style>
.triangle {
width: 0;
height: 0;
border-style: solid;
border-width: 0 50px 50px;
border-color: transparent transparent #06433c;
position: relative;
}
.triangle::after {
content: '';
border-style: solid;
border-width: 0 40px 40px;
border-color: transparent transparent #fff;
position: absolute;
top: 6px;
left: -40px;
}
</style>
</head>
<body>
<div class="triangle"></div>
</body>
</html>
复制代码
原理分析
可以看到,边框是实现三角形的部分,边框实际上并不是一个直线,如果我们将四条边设置不同的颜色,将边框逐渐放大,可以得到每条边框都是一个梯形
当分别取消边框的时候,发现下面几种情况:
- 取消一条边的时候,与这条边相邻的两条边的接触部分会变成直的
- 当仅有邻边时, 两个边会变成对分的三角
- 当保留边没有其他接触时,极限情况所有东西都会消失
也可以利用旋转、隐藏,以及设置内容宽高等属性,就能够实现其他类型的三角形如设置直角三角形。
.box {
/* 内部大小 */
width: 0px;
height: 0px;
/* 边框大小 只设置两条边*/
border-top: #4285f4 solid;
border-right: transparent solid;
border-width: 85px;
/* 其他设置 */
margin: 50px;
}
复制代码