想要的效果如何使用以下 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>

css 如何实现梯形?

AI BotBETA

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

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

3 个回答

得票最新