画三角形
在 CSS 中，画一个三角形的最简单方法是使用 border 属性。通过设置一个元素的宽度和高度为 0，然后为它的四个边设置不同颜色的边框，只保留一边的边框颜色，其他边的边框颜色设为透明，从而形成一个三角形。以下是实现三角形的简单示例代码：
//向下的三角形
.triangle {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 50px solid black;
}
画六边形
position: relative;
width: 100px; /* 六边形的宽度 */
height: 57.74px; /* 六边形的高度 */
background-color: #64C7CC; /* 六边形的颜色 */
margin: 28.87px 0; /* 调整六边形的位置 */
}
.hexagon::before,
.hexagon::after {
content: "";
position: absolute;
width: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
}
.hexagon::before {
bottom: 100%;
border-bottom: 28.87px solid #64C7CC;
}
.hexagon::after {
top: 100%;
width: 0;
border-top: 28.87px solid #64C7CC;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hexagon</title>
<style>
/* CSS代码放在这里 */
</style>
</head>
<body>
<div class="hexagon"></div>
</body>
</html>
画线条（横线）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.horizontal-line {
border-top: 1px solid black; /* 设置顶部边框为 1px 的黑色实线 */
width: 100%; /* 可以根据需要调整宽度 */
}
</style>
</head>
<body>
<div class="horizontal-line"></div>
</body>
</html>
单行文本超出显示省略号
.single-line {
width: 200px; /* 容器宽度 */
white-space: nowrap; /* 禁止换行 */
overflow: hidden; /* 隐藏溢出部分 */
text-overflow: ellipsis; /* 超出内容显示省略号 */
}
多行文本超出显示省略号
要实现多行文本溢出显示省略号，可以使用 -webkit-line-clamp 和 display: -webkit-box 结合的方法。这个方法目前支持性较好，但还是要注意兼容性。
.multi-line {
width: 200px; /* 容器宽度 */
height: 60px; /* 容器高度 */
overflow: hidden; /* 隐藏溢出部分 */
text-overflow: ellipsis; /* 超出内容显示省略号 */
display: -webkit-box; /* 设置为弹性伸缩盒子模型 */
-webkit-line-clamp: 3; /* 限制显示的行数 */
-webkit-box-orient: vertical; /* 设置伸缩盒子的子元素排列方式为从上到下垂直排列 */
white-space: normal; /* 正常换行 */
}
