Created a CSS Triangle with 3 different coloured borders, but can it be done with less/ more simple CSS code?

Question

So I've managed to create a CSS Triangle with 3 different coloured borders. It can be seen here: https://codepen.io/nuul/pen/oNbeZey

CSS code:

$bg: #0000e5

$color: ((#00007c, #0000e5), (#0000b0, #0000e5), (#0000ff, #0000e5))

@mixin linear-gradient($direction, $gradients...) 
  background-image: linear-gradient($direction, $gradients...)

@function colorL($some-color, $num)
  @return nth($some-color, $num)
 
@for $i from 1 through length($color)
  .sq-#{$i}
    @include linear-gradient(colorL(nth($color, $i), 2) 60%, colorL(nth($color, $i), 1) 75%)
    
$height: 9px
$width: $height * 3.47

body
  background: #3D4849
 
.blueCore
  position: absolute
  left: 5px
  top: 15px

.sq-wrapper
  width: $width
  height: $height
  font-size: 0
  display: inline-block
  clip-path: polygon(50% 0%, 0 100%, 100% 100%)
  position: absolute
  left: 0
  top: $height
  transform-origin: 50% 0
 
.sq-1-wrapper
  transform: rotate(0deg)

.sq-2-wrapper
  transform: rotate(240deg)
 
.sq-3-wrapper
  transform: rotate(-240deg)
  
.sq
  width: 100%
  height: 100%

.blueBlock
  background-color: #0000e5
  border: 3px solid
  border-top-color: #0000ff
  border-right-color: #00007c
  border-bottom-color: #00007c
  border-left-color: #0000ff
  width: 42px
  height: 42px
  position: relative
  z-index: 10

Though I am happy with the result, I am still wondering if the CSS code for this can be simplified (since there is a lot of CSS code needed for just a triangle). Perhaps with a :before :after? The looks should stay the same

Any thoughts?

ps: You can ignore the square around it, I just want to put it in a div for future usage

Thanks!

Answer 1

In terms of your question, I wouldn't recommend using CSS for this and maybe in this situation, an image or even font-awesome would be more efficient. However, you could possibly tweak something like below. It uses two elements to create this shape.

.outer {
  position: relative;
  height: 200px;
  width: 200px;
  background: dimgray;
}

.outer:before {
  /*Bottom Border Here*/
  content: "";
  position: absolute;
  height: 10%;
  width: 90%;
  left: 5%;
  top: 88%;
  z-index: 10;
  background: darkblue;
  transform: perspective(100px) rotateX(60deg);
}

.outer:after {
  /*Triangle Background*/
  content: "";
  position: absolute;
  width: 0;
  left: 10px;
  bottom: 10px;
  border-top: 0;
  border-left: 90px solid transparent;
  border-right: 90px solid transparent;
  border-bottom: 150px solid blue;
}

.inner {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

.inner:before {
  content: "";
  position: absolute;
  height: 10%;
  width: 90%;
  left: -17%;
  top: 50%;
  background: lightblue;
  /*Left border colour here*/
  transform: rotate(121deg) perspective(100px) rotateX(60deg);
}

.inner:after {
  content: "";
  position: absolute;
  height: 10%;
  width: 90%;
  right: -18%;
  top: 50%;
  background: rgb(0, 0, 220);
  /*right border colour here*/
  transform: rotate(-120deg) perspective(100px) rotateX(60deg);
}


/*demo only*/

.outer:hover:before {  background: darkred;}
.outer:hover:after {  border-bottom-color: red;}
.outer:hover .inner:before {  background: tomato;}
.outer:hover .inner:after {  background: rgb(220, 0, 0);}

<div class="outer">
  <div class="inner"></div>
</div>