Question 43363 in Html Question posted in
Some basic documentation can be found here.

Create HTML/CSS Box with Three Diagonal Colors

I am trying to create a square that has three colors similar to Two-tone background split by diagonal line using css but instead of just two colors, three more like this:

Block of three diagonal colors

Any advice? I tried this:

.diagonal-box {
  width: 200px;
  height: 200px;
  position: relative;
}

.diagonal-box:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 200px 200px;
  border-color: transparent transparent #FF7F50;
}

.diagonal-box:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 200px 200px 0;
  border-color: transparent #00BFFF transparent;
}

.diagonal-box div {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 200px 200px 0 0;
  border-color: #7CFC00 transparent transparent transparent;
}
<div class="diagonal-box">
  <div></div>
</div>

but it does not correctly put the triangles in the way that I want.

Tags:

2

Answers


  1. 0

    Does this solve your problem ?
    I’ve used clip-path to make those simple triangles rather than using invisible borders. You can tweak the width of the triangles’ short sides by changing the --width value.

    <html>

<head>
  <title>Box with Three Diagonal Colors</title>
  <style>
    *,
    *::before,
    *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    .diagonal-box {
      width: 200px;
      height: 200px;
      position: relative;
      background-color: blue;
    }

    .diagonal-box::before,
    .diagonal-box::after {
      position: absolute;
      inset: 0;
      /* this is the same as top, right, bottom, left : 0*/
      content: "";
    }

    .diagonal-box::before {
      --width: 160px;
      clip-path: polygon(0 0, var(--width) 0, 0 var(--width));
      background-color: yellow;
    }

    .diagonal-box::after {
      --width: 160px;
      clip-path: polygon(100% 100%, 100% calc(100% - var(--width)), calc(100% - var(--width)) 100%);
      background-color: red;
    }
  </style>
</head>

<body>
  <div class="diagonal-box"></div>
</body>

</html>
    Login or Signup to reply.
  2. 0

    There’s a simple solution requiring no extra div or before and after pseudo-elements:

    .diagonal-box {
    width: 200px;
    height: 200px;
    background: linear-gradient(to bottom right, #ff7f50 0% 35%, #7cfc00 35% 65%, #00bbff 65% 100%);
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search