Adding triangles with CSS that are responsive

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.

Just an observation - two of the blue dots are not at the points of white triangles, and the design may or may not have two white triangles in it. How about using clip-path? — A Haworth, Aug 30 '21 at 10:18
I have spent many hours trying to code this. I mainly struggled with what to search for in order to create these shapes and add blue dots and posted this question not to get the answer but, more to be pointed in the right direction. I understand your point completely and with the answer given by @AHaworth I now have plenty to research and new CSS properties that I need to fully understand. Thanks — tony25225, Aug 31 '21 at 12:46

score 0 · Accepted Answer · answered Aug 30 '21 at 13:46

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>

Thank you @AHaworth this is what I was after. I will do some studying on clip-path and also more on pseudo elements. Thanks! — tony25225, Aug 31 '21 at 12:48

Adding triangles with CSS that are responsive

1 Answers1