上下箭头，如何优化CSS？
上下箭头，如何优化CSS？
提问于 2018-05-25 21:20:06
我的问题是，我想要在某些部分的上方和下方显示“箭头”(我当然已经给过课程了)。
这些箭头既可以是下箭头，也可以是上箭头，您可以为下箭头和上箭头选择左箭头和右箭头：
我制作了一个代码片段来演示，但是不能正确地插入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>
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-05-31 17:50:59
一位同事对此进行了思考，并提出了这个粗鲁的解决方案：
.u-arrow {
&-top,
&-bottom {
&-right,
&-left {
position: relative;
&:before,
&:after {
z-index: 0;
content: '';
display: none;
position: absolute;
left: 0;
right: 0;
height: 50px;
height: 12vw;
width: 100%;
background-size: 100% 100%;
background-image: url("/dist/images/arrow-white-mobile.svg");
.u-bg-blue & {
background-image: url("/dist/images/arrow-blue-mobile.svg");
}
@media (min-width: $screen-sm) {
background-image: url("/dist/images/arrow-white.svg");
.u-bg-blue & {
background-image: url("/dist/images/arrow-blue.svg");
}
}
@media (min-width: 1200px) {
height: 150px;
}
}
}
}
&-top {
&-left,
&-right {
padding-top: 50px;
padding-top: 12vw;
@media (min-width: 1200px) {
padding-top: 150px;
}
&:before {
display: block;
top: 0;
}
}
&-right {
&:before {
transform: scaleX(-1);
}
}
}
&-bottom {
&-left,
&-right {
padding-bottom: 50px;
padding-bottom: 12vw;
@media (min-width: 1200px) {
padding-bottom: 150px;
}
&:after {
display: block;
bottom: 0;
}
}
&-left {
&:after {
transform: scaleY(-1);
}
}
&-right {
&:after {
transform: scale(-1, -1);
}
}
}
}Stack Overflow用户
发布于 2018-05-25 21:25:52
我会考虑线性梯度，你可以很容易地通过为每个可以组合的箭头创建两个类来实现：
.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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50530189
复制相关文章
相似问题
腾讯云开发者
