如何用CSS实现对角线？采用ul li+CSS3尝试未达预期

看起来你是想给列表项添加对角线分隔，或是实现对角线布局的视觉效果，但现有代码没达到预期。我来帮你梳理问题并给出可行方案：

先分析你的现有代码 #

你的HTML结构是通过Laravel循环生成带图标和文本的列表项，但CSS只写了overflow: hidden，缺少实现对角线的关键样式（比如伪元素、transform属性等），这就是效果不达预期的核心原因。

方案1：列表项之间添加对角线分隔线 #

如果需求是让每个列表项之间用对角线作为分隔，可以通过给li添加伪元素来实现，完整代码示例如下：

保留你的HTML结构（兼容Laravel语法） #

<div class="row mb-20 text-center">
  <h3>{{ __('Visions &amp; Missions') }}</h3>
  <div class="bg_infostep">
    <ul class="list-inline">
      @foreach($visions as $vision)
        <li>{!!$vision->icon!!}<span>{{$vision->title}} <br> {{$vision->description}}</span></li>
      @endforeach
    </ul>
  </div>
</div>

对应的完整CSS代码 #

.bg_infostep {
  overflow: hidden;
  padding: 20px 0;
}

/* 覆盖Bootstrap默认的list-inline样式，改用flex布局更易控制 */
.list-inline {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 25px;
}

.list-inline li {
  position: relative;
  padding: 10px 0;
  display: flex;
  align-items: center;
  gap: 15px;
}

/* 给除最后一项外的列表项添加对角线分隔线 */
.list-inline li:not(:last-child)::after {
  content: '';
  position: absolute;
  bottom: -12px;
  left: 5%;
  width: 90%;
  height: 1px;
  background: #ddd;
  transform: rotate(-1.5deg); /* 调整角度可改变对角线倾斜程度 */
}

/* 图标样式可根据实际图标类型调整 */
.list-inline li > svg {
  width: 40px;
  height: 40px;
  color: #2c3e50;
}

.list-inline li span {
  text-align: left;
  line-height: 1.5;
}

方案2：实现对角线排列的列表布局 #

如果需求是让列表项整体呈现对角线排列的视觉效果，可以通过transform: skew结合容器与内部元素的反向倾斜来实现：

调整后的CSS代码 #

.bg_infostep {
  overflow: hidden;
  padding: 30px;
  background: #f8f9fa;
}

.list-inline {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 30px;
  transform: skewY(-3deg); /* 容器整体倾斜，形成对角线布局基础 */
}

.list-inline li {
  position: relative;
  padding: 18px;
  background: white;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  display: flex;
  align-items: center;
  gap: 15px;
  transform: skewY(3deg); /* 内部元素反向倾斜，保证文字内容水平显示 */
}

.list-inline li > svg {
  width: 45px;
  height: 45px;
  color: #3498db;
}

关键注意事项 #

• 如果你用了Bootstrap的list-inline类，需要覆盖它默认的display: inline-block属性，改用flex布局才能更好控制垂直方向的对角线效果；
• 调整transform: rotate()或skew()的角度值，可以得到不同倾斜程度的对角线；
• 伪元素的位置（top/bottom/left/right）需要根据你的布局间距微调，避免和列表内容重叠。

你可以根据实际需求选择对应的方案，要是有具体的视觉细节要求（比如颜色、间距等），直接调整参数就行~

内容的提问来源于stack exchange，提问作者mafortis