Arrows top and bottom, how to optimalise CSS? - html

Question

My problem is that I want to display 'arrows' above and below certain sections (which I have given classes of course).
These arrows can be both bottom, top and you can pick left and right for both the bottom and top arrow:
I made a snippet to demonstrate, but wasn't able to insert the SVG properly, so have replaced that code with background: red;.
The problem with above code is that it uses a wildcard selector on the classes, so it might interfere. So I would prefer something like class="arrow arrow-top arrow-left". However, that gives a problem when you add two arrows to one section: class="arrow arrow-top arrow-left arrow-bottom arrow-right".
Any suggestions on how to optimise this code?
[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

I would consider linear-gradient and you can easily achieve this by having two classes for each arrow that you can combine:
.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>

Answer 2

Why not use CSS clip-path's to create the shapes you want within you :before's and :after's.
You will get a slick outcome, with solid corners and it will also be very easy to change their shape to your desires.
clip-path - CSS | MDN
CanIUse Support
clip-path Generator
body {
margin: 0;
padding: 0;
}
section {
padding: 30px;
height: 300px;
width: 100%;
background: #EC644B;
position: relative;
}
section:nth-child(odd) {
background: #DCC6E0
}
.arrow-top-left,
.arrow-top-right {
padding-top: 80px;
}
.arrow-top-left:before,
.arrow-top-right:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 80px;
background: blue;
}
.arrow-top-left:before {
-webkit-clip-path: polygon(20% 100%, 0 0, 100% 0);
clip-path: polygon(20% 100%, 0 0, 100% 0);
}
.arrow-top-right:before {
-webkit-clip-path: polygon(80% 100%, 0 0, 100% 0);
clip-path: polygon(80% 100%, 0 0, 100% 0);
}
.arrow-bottom-left,
.arrow-bottom-right {
padding-bottom: 80px;
}
.arrow-bottom-left:after,
.arrow-bottom-right:after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 80px;
background: green;
}
.arrow-bottom-left:after {
-webkit-clip-path: polygon(20% 0, 0% 100%, 100% 100%);
clip-path: polygon(20% 0, 0% 100%, 100% 100%);
}
.arrow-bottom-right:after {
-webkit-clip-path: polygon(80% 0, 0% 100%, 100% 100%);
clip-path: polygon(80% 0, 0% 100%, 100% 100%);
}
<section class="arrow-top-left arrow-bottom-right">
</section>
<section class="arrow-bottom-right">
</section>
<section class="arrow-top-right">
</section>

Answer 3

A colleague thought about this and came up with this SASS-solution:
.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);
}
}
}
}