如何优化上下箭头样式的CSS代码？

我来分享几个实用的优化思路，既能解决通配符选择器的样式冲突风险，又能让类名更简洁易维护：

方案一：精准组合类名方案 #

这个方案用基础类+方向修饰类的组合，替代容易冲突的通配符选择器，同时简化类名结构：

优化后的CSS代码 #

/* 基础箭头容器，替代原有的[class*=arrow]通配符 */
.arrow {
  position: relative;
}

/* 箭头元素基础样式，默认隐藏 */
.arrow::before,
.arrow::after {
  content: '';
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  height: min(12vw, 50px); /* 用min函数统一响应式高度，避免重复代码 */
  width: 100%;
  background-color: red; /* 替换为你的SVG背景即可 */
  background-size: 100% 100%;
}

/* 顶部箭头的内边距 */
.arrow.top {
  padding-top: min(12vw, 50px);
}

/* 底部箭头的内边距 */
.arrow.bottom {
  padding-bottom: min(12vw, 50px);
}

/* 顶部左箭头 */
.arrow.top.left::before {
  display: block;
  top: 0;
}

/* 顶部右箭头（X轴翻转） */
.arrow.top.right::before {
  display: block;
  top: 0;
  transform: scaleX(-1);
}

/* 底部左箭头（Y轴翻转） */
.arrow.bottom.left::after {
  display: block;
  bottom: 0;
  transform: scaleY(-1);
}

/* 底部右箭头（双轴翻转） */
.arrow.bottom.right::after {
  display: block;
  bottom: 0;
  transform: scale(-1, -1);
}

/* 原有非必要样式保留 */
section {
  background-color: #EC644B;
  height: 300px;
  position: relative;
}

section:nth-child(odd) {
  background-color: #DCC6E0;
}

p {
  padding: 20px;
}

对应HTML写法 #

<!-- 顶部左箭头 + 底部左箭头 -->
<section class="arrow top left bottom">
  <p>Een prachtige sectie</p>
</section>

<!-- 顶部右箭头 + 底部右箭头 -->
<section class="arrow top right bottom right">
  <p>Een prachtige sectie</p>
</section>

<!-- 仅底部右箭头 -->
<section class="arrow bottom right">
  <p>Een prachtige sectie</p>
</section>

方案优势 #

• 彻底移除了容易误匹配的通配符选择器，改用精准的.arrow基础类，避免样式冲突
• 类名拆分更合理：.top/.bottom控制箭头位置，.left/.right控制方向，组合灵活且简洁
• 用min()函数简化响应式尺寸的写法，代码更精简

方案二：数据属性配置方案 #

如果想要更简洁的HTML结构，可以用自定义数据属性来集中配置箭头，减少类名数量：

优化后的CSS代码 #

/* 匹配带有箭头配置的容器 */
[data-arrows] {
  position: relative;
}

/* 箭头元素基础样式 */
[data-arrows]::before,
[data-arrows]::after {
  content: '';
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  height: min(12vw, 50px);
  width: 100%;
  background-color: red;
  background-size: 100% 100%;
}

/* 根据配置添加顶部内边距 */
[data-arrows*="top"] {
  padding-top: min(12vw, 50px);
}

/* 根据配置添加底部内边距 */
[data-arrows*="bottom"] {
  padding-bottom: min(12vw, 50px);
}

/* 顶部左箭头 */
[data-arrows*="top-left"]::before {
  display: block;
  top: 0;
}

/* 顶部右箭头 */
[data-arrows*="top-right"]::before {
  display: block;
  top: 0;
  transform: scaleX(-1);
}

/* 底部左箭头 */
[data-arrows*="bottom-left"]::after {
  display: block;
  bottom: 0;
  transform: scaleY(-1);
}

/* 底部右箭头 */
[data-arrows*="bottom-right"]::after {
  display: block;
  bottom: 0;
  transform: scale(-1, -1);
}

/* 原有非必要样式保留 */
section {
  background-color: #EC644B;
  height: 300px;
  position: relative;
}

section:nth-child(odd) {
  background-color: #DCC6E0;
}

p {
  padding: 20px;
}

对应HTML写法 #

<section data-arrows="top-left bottom-left">
  <p>Een prachtige sectie</p>
</section>

<section data-arrows="top-right bottom-right">
  <p>Een prachtige sectie</p>
</section>

<section data-arrows="bottom-right">
  <p>Een prachtige sectie</p>
</section>

方案优势 #

• HTML结构极简洁，一个数据属性就能定义多个箭头的位置和方向
• 数据属性的选择器比类通配符更安全，只会匹配专门的箭头配置，不会误匹配其他类名
• 配置方式直观，一眼就能看出元素的箭头布局

额外优化建议 #

1. 提取CSS变量：把箭头的尺寸、颜色等公共值提取成变量，方便统一修改：

   :root {
     --arrow-height: min(12vw, 50px);
     --arrow-bg: red;
   }
   

   然后在样式中引用这些变量，后期维护更高效。

2. 替换SVG背景：当可以正常插入SVG时，直接把background-color: red替换为你的SVG背景即可，不需要修改其他样式结构。

内容的提问来源于stack exchange，提问作者Aart den Braber