🧑💻秒杀！前端常见手写题！-HowieCong
一、利用边框实现三角形
（1）编码实现
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* 定义一个基础的三角形容器类 */
.triangle-container {
width: 0; /* 宽度设为 0 */
height: 0; /* 高度设为 0 */
border-style: solid; /* 边框样式设为实线 */
}
/* 向上的三角形 */
.triangle-up {
border-width: 0 50px 50px 50px;
/* 上边框宽度为 0，左右边框宽度为 50px，下边框宽度为 50px */
border-color: transparent transparent blue transparent;
/* 上、左、右边框颜色透明，下边框颜色为蓝色 */
}
/* 向下的三角形 */
.triangle-down {
border-width: 50px 50px 0 50px;
/* 上边框宽度为 50px，左右边框宽度为 50px，下边框宽度为 0 */
border-color: blue transparent transparent transparent;
/* 上边框颜色为蓝色，左、右、下边框颜色透明 */
}
/* 向左的三角形 */
.triangle-left {
border-width: 50px 50px 50px 0;
/* 上、下、右边框宽度为 50px，左边框宽度为 0 */
border-color: transparent blue transparent transparent;
/* 上、下、右边框颜色透明，左边框颜色为蓝色 */
}
/* 向右的三角形 */
.triangle-right {
border-width: 50px 0 50px 50px;
/* 上、下边框宽度为 50px，右边框宽度为 0，左边框宽度为 50px */
border-color: transparent transparent transparent blue;
/* 上、左、下边框颜色透明，右边框颜色为蓝色 */
}
</style>
</head>
<body>
<div class="triangle-container triangle-up"></div>
<div class="triangle-container triangle-down"></div>
<div class="triangle-container triangle-left"></div>
<div class="triangle-container triangle-right"></div>
</body>
</html>（3）实现效果
二、利用 clip-path 实现三角形
（1） 编码实现
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* 定义一个使用 clip-path 的三角形类 */
.clip-triangle {
width: 100px; /* 设置元素宽度 */
height: 100px; /* 设置元素高度 */
background-color: red; /* 设置背景颜色 */
clip-path: polygon(50% 0, 100% 100%, 0 100%);
/* 通过多边形裁剪路径创建一个向下的三角形，指定三个顶点坐标 */
}
</style>
</head>
<body>
<div class="clip-triangle"></div>
</body>
</html>（2）实现效果
三、使用 SVG
（1）编码实现
html
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
<polygon points="50,0 100,100 0,100" fill="purple" />
</svg>（2）实现效果
四、使用 ::before 或 ::after 伪元素
（1）编码实现
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Triangle with Pseudo-element</title>
<style>
/* 定义父元素的样式 */
.triangle-pseudo {
position: relative; /* 设置为相对定位，以便伪元素基于此定位 */
width: 200px; /* 父元素宽度 */
height: 200px; /* 父元素高度 */
border: 1px solid #ccc; /* 为了方便查看父元素范围，添加边框 */
}
/* 定义伪元素的样式 */
.triangle-pseudo::before {
content: ''; /* 伪元素必须有 content 属性 */
position: absolute; /* 绝对定位 */
left: 50px; /* 定位到父元素的中心 */
top: 0; /* 定位到父元素的顶部 */
width: 0;
height: 0;
border-left: 50px solid transparent; /* 左边框透明 */
border-right: 50px solid transparent; /* 右边框透明 */
border-bottom: 100px solid green; /* 底边框为绿色 */
}
</style>
</head>
<body>
<!-- 使用定义好样式的类 -->
<div class="triangle-pseudo"></div>
</body>
</html>（2）实现效果
五、讨论
（1）如果要给三角形添加动画效果，比如让它旋转，应该怎么做？
- 可以使用 CSS3 的
@keyframes规则和animation属性。例如，要让一个使用边框实现的向上三角形旋转
js
.triangle-up {
width: 0;
height: 0;
border-width: 0 50px 50px 50px;
border-style: solid;
border-color: transparent transparent blue transparent;
animation: rotate 2s infinite linear; /* 应用旋转动画 */
}
@keyframes rotate {
from {
transform: rotate(0deg); /* 起始角度为 0 度 */
}
to {
transform: rotate(360deg); /* 结束角度为 360 度 */
}
}(2)在响应式设计中，如何保证三角形的大小和比例适应不同的屏幕尺寸？
-
对于使用边框实现的三角形，可以使用相对单位（如百分比）来设置边框宽度
-
对于使用
clip-path实现的三角形，可以使用vw、vh等视口单位来确定元素的大小和polygon()函数中的坐标值，这样能让三角形根据屏幕尺寸自动调整大小和比例
（3）clip-path 的 polygon() 函数中坐标是如何确定的？
polygon()函数通过一系列的坐标点来定义裁剪区域。坐标的格式是(x y)，其中x表示水平位置，y表示垂直位置。取值可以是像素、百分比等单位。对于三角形，需要指定三个顶点的坐标，按顺时针或逆时针顺序排列
（4）clip-path 实现三角形和边框实现三角形相比，有什么优缺点？
-
优点 ：
clip-path更加灵活，可以实现各种不规则形状的三角形，通过精确设置坐标点能满足复杂的设计需求 -
缺点 ：兼容性不如边框实现方式，在一些旧版本的浏览器中可能不支持。而且使用
clip-path可能会对性能有一定影响，尤其是在动画或频繁重绘的场景下
❓其他
1. 疑问与作者HowieCong声明
-
如有疑问、出错的知识，请及时点击下方链接添加作者HowieCong的其中一种联系方式或发送邮件到下方邮箱告知作者HowieCong
-
若想让作者更新 哪些方面的技术文章或补充更多知识在这篇文章，请及时点击下方链接添加里面其中一种联系方式或发送邮件到下方邮箱告知作者HowieCong
-
声明 ：作者HowieCong目前只是一个前端开发小菜鸟，写文章的初衷只是全面提高自身能力和见识；如果对此篇文章喜欢或能帮助到你，麻烦给作者HowieCong点个关注/给这篇文章点个赞/收藏这篇文章/在评论区留下你的想法吧，欢迎大家来交流！