4 column full-width link section

Question

I am going to be building a section on an upcoming website that features a 4 column link section that looks like the below screenshot.

Each box will be a clickable link and on hover they will change colour. I am using boostrap framework.

I think it would be best to save each box as an image but that would mean also doing images for the hover and the page could start to get a bit slow.

Is there a way I can do each box in HTML including the chevron then just add a background image for the image in the background?

Let me know if anyone has any ideas

Answer 1

I've created a simple example in pure css for you. I've added comments in the code

.blocks {
  display: flex;
  width: 100%;
  height: 50px;
}

.blocks .block {
  flex: 0 0 25%;
  background-color: blue;
  position: relative;
  display: flex;
}

.blocks .block a {
  
  padding-left: 30px; /* so the triangle doesnt overlap the text */
  color: white;
  margin: auto 0;
}

/* not(:last-child) so the last one will not have the triangle */
.blocks .block:not(:last-child)::after {
  content:"";
  position:absolute;
  border-left:15px solid blue; /*This is your color of the arrow*/
  border-top:25px solid transparent; /*half the height (50px)*/
  border-bottom:25px solid transparent; /*half the height (50px)*/
  right:-15px; /*we want it on far right and overlapping the next block*/
  top:0;
  z-index: 1;
}

/* 2n selector selects every second element so you can have diffrent colors automaticly */
.blocks .block:nth-of-type(2n) {
  background-color: green;
}

.blocks .block:nth-of-type(2n)::after {
  border-left:15px solid green;
}

<div class="container">
  <section class="blocks">
    <div class="block">
      <a href="#">
        Block1
      </a>
    </div>
    <div class="block">
      <a href="#">
        Block2
      </a>
    </div>
    <div class="block">
      <a href="#">
        Block3
      </a>
    </div>
    <div class="block">
      <a href="#">
        Block4
      </a>
    </div>
  </section>
</div>