前端 - css 如何实现梯形?

Question

想要的效果

如何使用以下 html 只修改 css 不增加元素的前提下实现上边的效果

  <div class="adm-index-bar-sidebar">    <div class="adm-index-bar-sidebar-row" data-index="1">      <div class="adm-index-bar-sidebar-item" data-index="1">        <div>1</div>      </div>    </div>    <div class="adm-index-bar-sidebar-row" data-index="2">      <div class="adm-index-bar-sidebar-item" data-index="2">        <div>2</div>      </div>    </div>    <div class="adm-index-bar-sidebar-row" data-index="3">      <div class="adm-index-bar-sidebar-item adm-index-bar-sidebar-item-active" data-index="3">        <div>3</div>      </div>    </div>  </div>

Answer 1

https://segmentfault.com/a/1190000043435634#comment-area

Answer 2

clip-path
https://www.plantcss.com/blog/how-to-make-rounded-corners-when-using-css-clip-path

Exploring the CSS Paint API: Rounding Shapes
https://css-tricks.com/exploring-the-css-paint-api-rounding-shapes/

Answer 3

https://jsrun.net/JHFKp

Answer 4

你可以使用 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 类），它的伪元素将进行旋转和颜色变化，从而创建一个不同的梯形效果。

你可以根据你的需求调整这些样式，例如改变梯形的大小、位置和颜色等。