你可以使用 CSS 的伪元素和 border 属性来创建一个梯形的效果。以下是一个示例的 CSS 代码，你可以将其添加到你的样式表中：
.adm-index-bar-sidebar {
position: relative;
width: 200px;
height: 300px;
background-color: #f0f0f0;
}
.adm-index-bar-sidebar-row {
position: relative;
height: 50px;
line-height: 50px;
text-align: center;
border-bottom: 1px solid #ddd;
}
.adm-index-bar-sidebar-item {
position: relative;
width: 100%;
height: 100%;
transition: all 0.3s ease;
}
.adm-index-bar-sidebar-item::before {
content: "";
position: absolute;
top: 0;
left: 50%;
width: 0;
height: 0;
border-style: solid;
border-width: 0 50px 50px 50px;
border-color: transparent transparent #f00 transparent;
transform-origin: 0 0;
transform: rotate(-45deg);
transition: all 0.3s ease;
}
.adm-index-bar-sidebar-item-active::before {
border-color: transparent transparent #0f0 transparent;
transform: rotate(0deg);
}
.adm-index-bar-sidebar-item-active {
color: #fff;
background-color: #0f0;
}
这段 CSS 代码首先定义了一些基本样式，如 .adm-index-bar-sidebar 的宽度、高度和背景色，以及 .adm-index-bar-sidebar-row 的高度、行高、文本对齐方式和下边框。
然后，我们为 .adm-index-bar-sidebar-item 添加了一个伪元素 ::before，它用于创建梯形效果。这个伪元素使用了 border 属性来创建一个梯形，并通过 transform 属性进行旋转和调整位置。
接下来，我们为 .adm-index-bar-sidebar-item-active 定义了一些样式，包括文本颜色、背景色和梯形的样式。当 .adm-index-bar-sidebar-item 被激活时（例如，通过 JavaScript 添加或删除 adm-index-bar-sidebar-item-active 类），它的伪元素将进行旋转和颜色变化，从而创建一个不同的梯形效果。
你可以根据你的需求调整这些样式，例如改变梯形的大小、位置和颜色等。
极客观点
项目管理
HarmonyOS
html5
https://jsrun.net/JHFKp