html - 箭头顶部和底部，如何优化 CSS？

Question

我的问题是我想在某些部分的上方和下方显示“箭头”(当然我已经给这些部分上课了)。

这些箭头可以是底部箭头，也可以是顶部箭头，您可以为底部和顶部箭头选择左侧和右侧:

我制作了一个片段来演示，但无法正确插入 SVG，因此已将该代码替换为 background: red;。

上述代码的问题在于它在类上使用了通配符选择器，因此可能会产生干扰。所以我更喜欢像 class="arrow arrow-top arrow-left" 这样的东西。但是，当您向一个部分添加两个箭头时，这会产生问题:class="arrow arrow-top arrow-left arrow-bottom arrow-right"。

关于如何优化这段代码有什么建议吗？

[class*=arrow]:before, [class*=arrow]:after {
	content: '';
	display: none;
	position: absolute;
	left: 0;
	right: 0;
	height: 50px;
	height: 12vw;
	width: 100%;
	//background-image: url("arrow.svg#svgView(preserveAspectRatio(none))");
  background-color: red;
	background-size: 100% 100%;
}
[class*=arrow-top] {
	padding-top: 50px;
	padding-top: 12vw;
}
[class*=arrow-bottom] {
	padding-bottom: 50px;
	padding-bottom: 12vw;
}

.arrow-top-left:before {
	display: block;
	top: 0;
}

.arrow-top-right:before {
	display: block;
	top: 0;
	transform: scaleX(-1);
}

.arrow-bottom-left:after {
	display: block;
	bottom: 0;
	transform: scaleY(-1);
}
.arrow-bottom-right:after {
	display: block;
	bottom: 0;
	transform: scale(-1, -1);
}

/* unessential code */

section {
  background-color: #EC644B;
  height: 300px;
  position: relative;
}
section:nth-child(odd) {
  background-color: #DCC6E0;
}
p {
  padding: 20px;
}

<section class="arrow  arrow-top   arrow-bottom-left">
  <p>Een prachtige sectie</p>
</section>
<section class="arrow-top-right  arrow-bottom-right">
  <p>Een prachtige sectie</p>
</section>
<section class="arrow-bottom-right">
  <p>Een prachtige sectie</p>
</section>

Answer 1

我会考虑线性渐变，您可以通过为每个可以组合的箭头设置两个类来轻松实现此目的:

.top-arrow,.bottom-arrow {
  margin:5px;
  min-height:200px;
  max-width:400px;
  position:relative;
  z-index:0;
  border:1px solid;
}
.top-arrow:before,
.bottom-arrow:after{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
}
.top-arrow:before {
  background:
   linear-gradient(to top right,transparent 50%,red 50.5%) top left/20% 50% no-repeat,
   linear-gradient(to top left,transparent 50%,red 50.5%) top right/80% 50.5% no-repeat;
}

.bottom-arrow:after {
  background:
   linear-gradient(to bottom right,transparent 50%,pink 50.5%) bottom left /80% 50% no-repeat,
   linear-gradient(to bottom left,transparent 50%,pink 50.5%) bottom right /20% 50.5% no-repeat;
}

<div class="top-arrow bottom-arrow">
</div>
<div class="bottom-arrow">
</div>
<div class="top-arrow">
</div>