Is this possible to recreate in CSS and if so how

what would I need to do? I tried creating multiple overlapping triangles with different angles and colours and ended up with a solid rectangle.

I am not able to use anything other than HTML or CSS to create this and it is not for a college assignment.

Is this possible to recreate in CSS and if so how

what would I need to do? I tried creating multiple overlapping triangles with different angles and colours and ended up with a solid rectangle.

I am not able to use anything other than HTML or CSS to create this and it is not for a college assignment.

• css
• responsive-design

• Is this just for visual effect? If so, have you looked into using background-image with linear-gradients and some transparency? – A Haworth Commented Feb 16 at 16:48
• Graphics such as this are best created in SVG. SVG is, essentially, to graphics what HTML is to text. However, if it absolutely must be HTML you would need to some through hoops such as this. – Frox Commented Feb 16 at 16:54
• @Frox using the border method to create triangles seems a bit old-fashioned nowadays - there are other things at our disposal, but I don't see why this isn't done in linear-gradients OK - depending on exactly what is required when the viewport or containing element dimensions change. – A Haworth Commented Feb 16 at 17:02
• @janetwebster can you describe how you want the image to adjust to different viewport (or containing element) aspect-ratios? e.g. is it always to take up the full height, what width is it to have in relation to the viewport, and/or are angles to be constant.... – A Haworth Commented Feb 16 at 17:03
• Show what you tried so we can help you fix it, otherwise we can just answer "Yes" and that does not help anyone much – Mark Schultheiss Commented Feb 17 at 20:51

1 Answer 1

You can use CSS linear gradients, e.g.:

--line-width: 1px;
--line-position: 35%;
background-image:
    linear-gradient(245deg, #00ffffcc 30%, transparent 30%),
    linear-gradient(290deg, #0000ffcc 25%, transparent 25%),
    linear-gradient(300deg,
        transparent var(--line-position),
        #00bfffcc var(--line-position) calc(var(--line-position) + var(--line-width)),
        transparent calc(var(--line-position) + var(--line-width))
    );

I used these resources:
Gradient with multi-position color-stops
CSS gradients with multiple stops and borders
Linear gradient with calc()
Hard-Stop Gradients

Note: to shorten this slightly you could use this trick.

background-image:
    linear-gradient(245deg, #00ffffcc 30%, transparent 0),
    linear-gradient(290deg, #0000ffcc 25%, transparent 0),
    linear-gradient(300deg, transparent 35%, #00bfffcc 0 calc(35% + 1px), transparent 0);

Working example:

.triangle-cluster {
  width: 20em;
  height: 20em;
}

.triangle-cluster {
  --line-width: 1px;
  --line-position: 35%;
  background-image:
    linear-gradient(245deg, #00ffffcc 30%, transparent 30%),
    linear-gradient(290deg, #0000ffcc 25%, transparent 25%),
    linear-gradient(300deg,
      transparent var(--line-position),
      #00bfffcc var(--line-position) calc(var(--line-position) + var(--line-width)),
      transparent calc(var(--line-position) + var(--line-width)));
}

<div class="triangle-cluster"></div>