CSS基础知识04

文本溢出通常是指在限定的空间内不能容纳所输入的文字，导致文字超出了容器的边界

一、文本溢出

1.1.css属性处理

所用到的属性

属性	属性值
overflow	visible：默认值，内容不会被修剪，会呈现在元素框之外。
	hidden：内容会被修剪，并且其余内容是不可见的。
	scroll：内容会被修剪，但是浏览器会显示滚动条，以便查看其余的内容。
	auto：如果内容被修剪，则浏览器会显示滚动条，以便查看其它的内容（超出会显示，不超出不显示，只显示y方向的）。
	inherit：规定应该从父元素继承overflow属性值。

属性	属性值
white-space	normal：默认值，空白会被浏览器忽略。
	nowrap：文本不会换行，文本会在同一行上继续，直到遇到`<br>`标签为止。
	pre：空白会被浏览器保留，其行为方式类似HTML中的`<pre>`标签。
	pre-wrap：保留空白序列，但是正常地进行换行。
	pre-line：合并空白符，但是保留所有换行符。
	inherit：规定应该从父元素继承white-space属性值。

属性	属性值
text-overflow	clip：不显示省略号（...），而是简单地裁剪。
text-overflow	ellipsis：当对象文本溢出时，显示省略标记（...），省略标记插入的位置通常是最后一个字符或最后一个词（取决于具体实现）。

要实现溢出时产生省略号的效果，通常需要结合使用white-space: nowrap（或pre-wrap等根据需求选择）和overflow: hidden属性。

例：

.text-container {width: 200px; /* 容器宽度 */white-space: nowrap; /* 强制文本在一行内显示 */overflow: hidden; /* 溢出内容为隐藏 */text-overflow: ellipsis; /* 溢出省略号 */
}

1.2.多行文本溢出处理

对于多行文本溢出，可以使用CSS的一些高级属性或JavaScript来实现。

1.CSS 多行文本溢出处理

CSS3 引入了-webkit-line-clamp属性（非标准属性，但得到了广泛支持），它允许限制在一个块元素显示的文本的行数。结合overflow: hidden、text-overflow: ellipsis和-webkit-box-orient: vertical属性，可以实现多行文本溢出显示省略号的效果。

例如：

.multiline-text {overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2; /* 控制显示的行数 */max-height: 3.2em; /* 根据行数计算出的高度，用于确保容器高度正确 */
}

2.JavaScript截断文本

使用JavaScript可以更加灵活地处理文本截断和省略号的添加。可以通过编写一个截断算法来确定截断位置并添加省略号。

例如：

function truncateText(text, maxLength) {if (text.length <= maxLength) {return text;}const truncated = text.substr(0, maxLength - 1);return truncated + '…';
}const text = '这是一段很长的文本，可能需要截断显示在页面上';
const maxLength = 20;
const truncatedText = truncateText(text, maxLength);
console.log(truncatedText); // 输出: '这是一段很长的文本…'

1.3.使用JavaScript库

还可以使用一些专门处理文本溢出的JavaScript库，如clamp-js、line-clamp等。这些库提供了更多灵活的选项和配置，可以根据需要来处理多行文本的溢出情况。例如，使用clamp-js库可以非常方便地实现多行文本溢出显示省略号的效果：

import clamp from 'clamp-js';
const element = document.getElementById('myText');
clamp(element, { clamp: 2 }); // 控制显示的行数为2

二、设置透明度

1.使用opacity属性（需要子元素都变透明）

opacity 属性可以应用于任何元素，并设置其整体透明度。值范围为 0（完全透明）到 1（完全不透明）

.element {opacity: 0.5; /* 设置50%的透明度 */
}

注意，使用 opacity 会使元素及其所有子元素都变得透明。

2.使用 RGBA 或 HSLA 颜色值（针对特定的颜色属性）

RGBA 和 HSLA 颜色模式允许你指定颜色的红、绿、蓝（或色调、饱和度、亮度）值以及一个额外的 alpha 通道值，用于设置透明度。

RGBA 示例：

.element {background-color: rgba(255, 0, 0, 0.5); /* 红色背景，50%透明度 */
}

HSLA 示例

.element {background-color: hsla(0, 100%, 50%, 0.5); 
/* 红色（色调为0），100%饱和度，50%亮度，50%透明度 */
}

使用 RGBA 或 HSLA 的好处是你可以只针对特定的颜色属性（如背景色或文本色）设置透明度，而不会影响元素的其他部分。

3.使用 `background-color` 的 `rgba()` 与 `background` 的结合

有时你可能想要一个元素有透明的背景色，但文本或其他内容保持不透明。这时，你可以使用 rgba() 来设置 background-color。

.element {background-color: rgba(0, 0, 0, 0.5); /* 黑色背景，50%透明度 */color: white; /* 白色文本 */
}

4. 使用 `::before` 或 `::after` 伪元素和 `opacity(部分透明)`

如果你想要一个元素的部分内容透明，而另一部分不透明，你可以使用伪元素。例如，你可以创建一个半透明的背景覆盖在元素上：

.element {position: relative; /* 确保伪元素相对于此元素定位 */z-index: 1; /* 确保元素本身在伪元素之上 */
}.element::before {content: "";position: absolute;top: 0;left: 0;right: 0;bottom: 0;background-color: rgba(0, 0, 0, 0.5); /* 黑色背景，50%透明度 */z-index: -1; /* 确保伪元素在元素之下 */
}

上述例子，.element 的内容将保持不透明，而一个半透明的黑色背景将覆盖在它之上。

可以使用盒模型来创建固定宽度的布局、流式布局、响应式布局等。

三、渐变边框

3.1.使用背景图像和`box-shadow`：

可以将渐变色设置为元素的背景图像，并使用box-shadow来模拟边框的效果。这种方法的一个缺点是，它不会创建一个真正的边框，而是一个在元素外部的阴影效果。

.element {width: 200px;height: 100px;background: linear-gradient(to right, red, blue); /* 渐变色背景 */box-shadow: 0 0 0 10px rgba(0, 0, 0, 0.1); /* 模拟边框的阴影，但这里不是真正的边框 *//* 注意：这里的box-shadow只是为了演示，它并不真正创建渐变色边框 */
}

注意：上面的box-shadow示例并不创建渐变色边框，而是创建了一个围绕元素的阴影。要真正模拟渐变色边框，你可能需要更复杂的技巧，比如使用伪元素

3.2.使用伪元素（::before和::after）：

可以使用伪元素来创建一个真正的渐变色边框。这种方法涉及为元素添加额外的层，并为这些层设置渐变色背景和适当的尺寸和位置。

.element {position: relative;width: 200px;height: 100px;z-index: 1; /* 确保内容在伪元素之上 */
}/* 顶部边框 */
.element::before {content: '';position: absolute;top: 0;left: 0;right: 0;height: 4px;background: linear-gradient(to right, red, blue); /* 渐变色 */z-index: -1; /* 确保伪元素在元素之下 */
}/* 右侧边框 */
.element::after {content: '';position: absolute;top: 0;right: 0;bottom: 0;width: 4px;background: linear-gradient(to bottom, red, blue);
/* 垂直渐变色，但这里为了与顶部边框一致，可以调整为与顶部相同的水平渐变，或根据需要调整 */z-index: -1; 
/* 确保伪元素在元素之下，但这里由于::before已经设置了-1，所以实际上这个z-index可以是-2或其他小于1的值，只要保证它在内容之下即可 */
/* 注意：由于CSS的层叠规则，如果两个伪元素有相同的z-index且都设置为-1，它们的堆叠顺序由它们在CSS中出现的顺序决定。在这个例子中，::before会先被渲染，然后是::after，但由于它们都是-1，所以视觉上它们是在同一层上的。然而，由于我们只需要确保伪元素在内容之下，所以这里的z-index值可以稍有不同，只要它们都小于内容的z-index即可。 */
}/* 为了完整性，添加底部和左侧边框的伪元素 */
/* 底部边框，使用一个新的伪元素，但这里我们可以利用已有的::after通过调整样式来避免额外的DOM节点，不过为了清晰起见，我们还是单独写出 */
/* 注意：在实际应用中，为了性能优化和代码简洁性，你可能会考虑合并伪元素，但这里为了教学目的，我们分开写 */
.element-bottom-border::after { 
/* 假设我们为需要底部边框的特定元素添加了这个类，或者你可以直接写在.element里并调整样式 */content: '';position: absolute;bottom: 0;left: 0;right: 0;height: 4px; /* 与顶部边框相同的厚度 */background: linear-gradient(to right, red, blue); /* 与顶部边框相同的渐变色 */z-index: -1; /* 确保在内容之下 *//* 注意：这里我们其实没有真正创建一个新的伪元素，而是假设了如果需要一个底部边框，应该如何设置。在实际应用中，你应该将这部分样式合并到.element::after中，并通过调整top和bottom属性来创建一个完整的边框框架，或者为.element添加一个新的伪元素（比如::after用于右侧和底部，再添加一个::before的变种用于左侧和可能需要的顶部调整，但在这个例子中我们已经有了顶部） */
}/* 左侧边框，同样地，我们可以利用已有的伪元素或添加一个新的 */
.element-left-border::before { /* 同样地，这是一个假设的类，用于说明如何添加左侧边框 */content: '';position: absolute;top: 0;bottom: 0;left: 0;width: 4px; /* 与右侧边框相同的厚度 */background: linear-gradient(to bottom, red, blue); /* 可以与右侧边框相同，也可以根据需要调整 */z-index: -1; /* 确保在内容之下 *//* 注意：同样地，这里我们其实是在描述如何添加左侧边框的样式，而不是真正创建了一个新的伪元素。在实际应用中，你应该将这些样式合并到已有的伪元素中，或者为.element添加一个新的伪元素来处理左侧边框 */
}/* 但是，为了简洁和性能，我们通常会尝试合并伪元素。下面是一个合并了所有边框样式的例子，但注意这只是一个概念性的展示，因为CSS不允许单个伪元素同时覆盖元素的四个边（至少不是以这种方式）。然而，你可以通过调整伪元素的尺寸和位置来模拟一个完整的边框框架。 *//* 合并边框样式的尝试（概念性展示，不完全正确） */
/* .element::pseudo-all-borders {content: '';position: absolute;top: 0; left: 0; right: 0; bottom: 0;/* 这里无法直接设置四个边的渐变色边框，因为伪元素是一个单独的层，它不能同时拥有四个独立的边框。但是，你可以通过一些技巧来模拟，比如使用多个背景层（虽然这通常不是通过伪元素实现的，而是通过元素本身和CSS的多背景特性），或者通过JavaScript动态创建和定位多个伪元素。在这个例子中，我们将继续使用两个伪元素（::before和::after）来分别处理水平和垂直方向的边框。*//* 由于这个伪类/伪元素是不存在的，并且上面的注释说明了为什么，所以下面的代码将被注释掉以避免混淆。background: linear-gradient(to right, red, blue) top left / 100% 4px no-repeat,  // 顶部边框linear-gradient(to bottom, red, blue) top right / 4px 100% no-repeat, // 右侧边框（但这样设置并不会正确显示，因为背景是层叠的，且这里尝试将两个渐变放在同一个伪元素上是不正确的）/* ...（省略了底部和左侧边框的尝试，因为它们同样不会按预期工作）*/z-index: -1;
} *//* 正确的做法是使用两个伪元素，并分别设置它们的样式来模拟四个边框 */
/* 下面的代码是实际可行的，它使用了.element::before和.element::after，并通过调整它们的尺寸和位置来模拟边框 */
.element::before,
.element::after {content: '';position: absolute;z-index: -1;
}.element::before {/* 合并顶部和左侧边框的样式（通过调整宽度和高度） */top: 0;left: 0;width: calc(100% - 4px); /* 减去右侧边框的宽度 */height: 4px; /* 顶部边框的高度 */background: linear-gradient(to right, red, blue); /* 顶部边框的渐变色 */
}.element::after {/* 合并右侧和底部边框的样式（通过调整宽度和高度，并设置top为底部边框的上边缘位置，但这里为了简单起见，我们将其设置为覆盖整个右侧和底部） */top: 4px; /* 从顶部边框下方开始 */right: 0;bottom: 0;width: 4px; /* 右侧边框的宽度 */background: linear-gradient(to bottom, red, blue) right top / 4px 100% no-repeat, /* 右侧边框的渐变色（但这样设置只会显示右侧边框的顶部部分，因为背景是层叠的，我们需要另一个伪元素或方法来处理底部部分，或者调整这个伪元素的尺寸和位置来覆盖整个右侧和底部，但这里为了简化，我们仅展示右侧边框的顶部） *//* 注意：这里的背景设置是不完整的，因为它不能同时显示右侧和底部的渐变色边框。在实际应用中，你可能需要为底部边框创建一个额外的伪元素，或者调整这个伪元素的尺寸和位置来覆盖整个右侧和底部，并使用多个背景层（但CSS不允许单个元素或伪元素有多个独立的背景层用于不同的边框），或者通过其他方法（如JavaScript）来动态创建和定位多个伪元素。然而，为了这个示例的简洁性，我们将仅展示如何设置右侧边框的顶部部分。*//* 由于上述限制，下面我们将仅设置右侧边框的样式，并省略底部边框的尝试，因为那将需要额外的技巧或伪元素。 */linear-gradient(to bottom, transparent, transparent 39px, red 40px, blue 100%) 0 4px / 100% calc(100% - 4px) no-repeat; /* 这是一个尝试同时显示右侧和底部边框的技巧，但它依赖于透明到渐变的过渡，并且不是完美的解决方案。这里的39px和40px是为了在右侧边框和假设的底部边框之间创建一个微小的间隙（因为渐变会覆盖到边框的边缘），但这种方法并不推荐，因为它依赖于固定的尺寸和可能的视觉不一致性。在实际应用中，你应该寻找更可靠的方法来处理这种情况。 *//* 注意：上面的背景设置尝试同时处理右侧和底部边框是不正确的，并且可能会导致不可预测的结果。这里仅作为展示尝试和

四、阴影

4.1.文字阴影

文字阴影使用 text-shadow 属性来定义。你可以指定水平偏移、垂直偏移、模糊半径和阴影颜色。

语法：

text-shadow: 水平阴影垂直阴影模糊距离阴影颜色;
水平阴影：可以是正值（向右）或负值（向左）

垂直阴影：可以是正值（向下）或负值（向上）

模糊距离：值越大，阴影越模糊。如果不需要模糊效果，可以设置为 0。

示例：

p {text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
}

4.2.盒阴影

盒子阴影使用 box-shadow 属性来定义。你可以指定水平偏移、垂直偏移、模糊半径、扩展半径和阴影颜色。

语法：

box-shadow:水平阴影垂直阴影模糊距离阴影扩展半径阴影颜色 inset;

水平阴影：可以是正值（向右）或负值（向左）

垂直阴影：可以是正值（向下）或负值（向上）

模糊距离：值越大，阴影越模糊。如果不需要模糊效果，可以设置为 0。

阴影的扩展半径：正值会使阴影变大，负值会使阴影变小。
阴影的颜色

inset：可选，将外部阴影 (outset) 改为内部阴影。如果指定为 inset，则阴影会出现在盒子内部。

示例：

div {box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.5), -1px -1px 2px rgba(255, 255, 255, 0.3) inset;
}

这将为 <div> 元素添加一个向右偏移 3 像素、向下偏移 3 像素、模糊半径为 5 像素、颜色为半透明的黑色的外部阴影，以及一个向左偏移 -1 像素、向上偏移 -1 像素、模糊半径为 2 像素、颜色为半透明的白色的内部阴影。

效果：

五、transform

5.1. 2D转换函数

平移（Translate）

语法：transform: translate(x, y); 或 transform: translateX(x); 或 transform: translateY(y);

功能：将元素在水平方向（X轴）和/或垂直方向（Y轴）上移动指定的距离。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Translate Example</title>
<style>.translate-box {width: 100px;height: 100px;background-color: lightblue;transform: translate(50px, 50px); /* 平移50px到右和50px到下 */}
</style>
</head>
<body>
<div class="translate-box">Translate</div>
</body>
</html>

旋转（Rotate）

语法：transform: rotate(angle);

功能：围绕元素的中心点将元素旋转指定的角度。角度为正时表示顺时针旋转，为负时表示逆时针旋转。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rotate Example</title>
<style>.rotate-box {width: 100px;height: 100px;background-color: lightcoral;transform: rotate(45deg); /* 旋转45度 */}
</style>
</head>
<body>
<div class="rotate-box">Rotate</div>
</body>
</html>

缩放（Scale）

语法：transform: scale(x, y); 或 transform: scaleX(x); 或 transform: scaleY(y);

功能：改变元素的宽度（X轴）和/或高度（Y轴）的缩放比例。数值大于1表示放大，小于1表示缩小。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Scale Example</title>
<style>.scale-box {width: 100px;height: 100px;background-color: lightgreen;transform: scale(1.5, 1.5); /* 宽度和高度都放大1.5倍 */}
</style>
</head>
<body>
<div class="scale-box">Scale</div>
</body>
</html>

倾斜（Skew）

语法：transform: skew(x-angle, y-angle); 或 transform: skewX(x-angle); 或 transform: skewY(y-angle);

功能：使元素在水平方向（X轴）和/或垂直方向（Y轴）上倾斜指定的角度。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Skew Example</title>
<style>.skew-box {width: 100px;height: 100px;background-color: lightpink;transform: skew(20deg, 10deg); /* X轴倾斜20度，Y轴倾斜10度 */}
</style>
</head>
<body>
<div class="skew-box">Skew</div>
</body>
</html>

矩阵变形（Matrix）

语法：transform: matrix(a, b, c, d, e, f);

功能：通过一个包含六个值的变换矩阵来指定一个2D变换。这个矩阵可以包含旋转、缩放、移动（平移）和倾斜功能。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>2D Matrix Example</title>
<style>.matrix-box {width: 100px;height: 100px;background-color: lightsteelblue;transform: matrix(1, 0.5, -0.5, 1, 0, 0); /* 2D矩阵变形 */}
</style>
</head>
<body>
<div class="matrix-box">Matrix 2D</div>
</body>
</html>

5.2. 3D转换函数（部分）

虽然问题主要关注2D转换，但CSS3 transform属性还支持3D转换函数，如：

3D旋转（Rotate3d）

语法：transform: rotate3d(x, y, z, angle);

功能：围绕一个通过元素原点的3D向量（由x、y、z定义）将元素旋转指定的角度。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rotate3d Example</title>
<style>.container {perspective: 1000px; /* 设置透视效果 */}.rotate3d-box {width: 100px;height: 100px;background-color: lightgoldenrodyellow;transform: rotate3d(1, 1, 0, 45deg); /* 绕X和Y轴组成的平面旋转45度 */transform-style: preserve-3d; /* 保持子元素的3D转换 */}
</style>
</head>
<body>
<div class="container"><div class="rotate3d-box">Rotate3d</div>
</div>
</body>
</html>

3D缩放（Scale3d）

语法：transform: scale3d(x, y, z);

功能：改变元素在3D空间中的缩放比例。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D Scale Example</title>
<style>.container {perspective: 1000px; /* 设置透视效果 */}.scale3d-box {width: 100px;height: 100px;background-color: lightseagreen;transform: scale3d(1.5, 1, 1); /* 沿X轴放大1.5倍，Y轴和Z轴保持不变 */transition: transform 1s; /* 添加过渡效果 */}.scale3d-box:hover {transform: scale3d(2, 1, 1); /* 沿X轴放大2倍，Y轴和Z轴保持不变 */}
</style>
</head>
<body>
<div class="container"><div class="scale3d-box">Scale3D</div>
</div>
</body>
</html>

`transform-origin`属性

功能：用于设置元素转换的基点（参照点）。默认点是元素的中心点。

语法：transform-origin: x y; 其中x和y可以是数值（带单位，如px、em等）、百分比或关键字（left、right、bottom、top、center）。

示例1：改变旋转的原点

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Transform Origin Example</title>
<style>.box {width: 100px;height: 100px;background-color: lightcoral;transform-origin: top left; /* 设置旋转的原点为左上角 */transform: rotate(45deg); /* 旋转45度 */}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>

示例2：使用百分比设置原点位置

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Transform Origin Percentage Example</title>
<style>.box {width: 200px;height: 200px;background-color: lightblue;transform-origin: 50% 50%; /* 使用百分比设置原点为元素中心 */transform: scale(1.5); /* 缩放1.5倍 */}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>

5.3.注意事项

transform-origin 属性只有在设置了 transform 属性时才会起作用。

transform-origin 属性可以接受两个或三个值来指定原点位置。两个值时，第一个值表示X轴偏移量，第二个值表示Y轴偏移量。三个值时，第三个值表示Z轴偏移量（用于3D变换）。

原点位置可以使用百分比、具体的长度单位（如px、em等）或关键字（如top、right、bottom、left、center）来指定。

变换效果（如旋转、缩放等）会基于指定的原点位置进行。

在使用transform属性时，需要注意元素的布局和定位关系，以确保转换效果符合预期。

某些转换函数（如3D转换）可能需要浏览器支持特定的前缀（如-webkit-）才能正常工作。

转换函数可以组合使用，以实现更复杂的视觉效果。但需要注意性能问题，过多的转换可能会影响页面的渲染速度。

5.4.案例

@keyframes 是 CSS 中用于定义动画关键帧的规则。它允许指定动画在特定时间点的样式，从而在动画的起始和结束之间创建平滑的过渡效果。通过 @keyframes，可以控制动画中的每一个细节，包括动画何时开始、何时结束、以及动画过程中元素如何变化

1.爱心

<style>* {margin: 0;padding: 0;}.box {position: absolute;Left: 50%;top: 50%;transform: translate(-50%, -50%);}.left,.right {width: 100px;height: 150px;background-color: red;fLoat: left;border-radius: 50% 50% 0 0;}.left {transform: rotate(46deg);transform-origin: right bottom;animation: move1 0.8s infinite;}.right {transform: rotate(-46deg);transform-origin: left bottom;animation: move2 0.8s infinite;}@keyframes move1{0%{transform: rotate(46deg) scale(1);}100%{transform: rotate(46deg) scale(1.4);}}@keyframes move2{0%{transform: rotate(-46deg) scale(1);}100%{transform: rotate(-46deg) scale(1.4);}}
</style>
<body><div class="box"><div class="left"></div><div class="right"></div></div>
</body>

2.风车

<style>* {padding: 0;margin: 0;}.box {width: 200px;height: 200px;position: relative;transform: rotate(90deg);    animation: one 2.0s infinite;}@keyframes one{0%{transform: rotate(0deg);}100%{transform: rotate(1800deg);}}.triangle {border-top: 50px solid transparent;border-right: 50px solid green;border-bottom: 50px solid transparent;border-left: 50px solid transparent;position: absolute;}.box div:nth-of-type(2) {top: 0;left: 100px;border-right: 50px solid yellow;transform: rotate(90deg);}.box div:nth-of-type(3) {top: 100px;left: 100px;border-right: 50px solid red;transform: rotate(180deg);}.box div:nth-of-type(4) {top: 100px;left: 0;border-right: 50px solid blue;transform: rotate(270deg);}
</style>
<div class="box"><div class="triangle"></div><div class="triangle"></div><div class="triangle"></div><div class="triangle"></div>
</div>

上述内容若有遗漏或不足之处，恳请各位大佬不吝赐教，指正并帮助美化，以期更加完善

码字不易，给孩子点点赞呗！！！