Adding triangles with CSS that are responsive - css

Question

I am struggling to create the above design of the green background, two white triangles and blue dots on the point of the triangles.
I have to create two triangles using W3School tutorial but they are not responsive causing issues. I have created the green background in PS with white triangles and blue dots but cannot get the image to sit in the same position across screen sizes.
Any help in creating the above using HTML/CSS would be great.

Answer 1

You can use clip-path on a pseudo element to create the graph-like zig zag and background images on another pseudo element to place the blue dots.
It is important to note that everything has to be done in relative terms, e.g. %s, so that the whole is responsive.
While this is pretty straightforward for the zig zag, adjustments have to be made to the placing of the dots as things are placed relative to their top left corner not relative to their center, which is what we require for the circles.
Also the height of the 'background' (the zigzag plus a little bit below the green to accomodate the circle at the bottom) has to be specified in terms of the width. Eventually CSS aspect-ratio will be useful for this but just at the moment not all browsers support it so this snippet uses the well-known hack of defining an element's height in terms of padding (the units for which are always the width's).
* {
padding: 0;
margin: 0;
}
.graphbg {
background: white;
width: 100vw;
height: 100vh;
position: relative;
margin: 0;
padding: 0;
}
.graphbg::before,
.graphbg::after {
margin: 0;
padding: 0;
box-sizing: border-box;
overflow: hidden;
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: 1;
overflow: hidden;
--w: 4;
/* set these so --w/--h is the proportion of width to height you want this background to have */
--h: 1;
/* soon you will be able to use aspect-ratio: 4 / 1 but currently, August 2021, Safari IOS does not support it */
height: 0;
padding-top: calc( var(--h) / var(--w) * 100%);
/* to force the element to have the right height */
}
.graphbg::before {
background: green;
clip-path: polygon(0 0, 98% 0, 50% 95%, 25% 50%, 0 95%);
}
.graphbg::after {
background-image: radial-gradient(circle, blue 0 70%, transparent 70% 100%), radial-gradient(circle, blue 0 70%, transparent 70% 100%), radial-gradient(blue 0 70%, transparent 70% 100%), radial-gradient(blue 0 70%, transparent 70% 100%);
background-repeat: no-repeat;
background-size: 2% 8%;
background-position: -1% 99%, 24.5% 50%, 50% 97%, 99% -4%;
}
<div class="graphbg"></div>