How to make half-square background in css

Question

square cut in half diagonaly

Is it possible to make in pure css background for half square like on the image. I know that it can be done with an image as background, but I need to use 5 different colours, and maybe in future the colours can be changed.

might find this [css triangle](https://css-tricks.com/snippets/css/css-triangle/) useful — amdixon, Apr 23 '15 at 09:43
There are [several](https://css-tricks.com/examples/ShapesOfCSS/) [different](http://stackoverflow.com/questions/10580226/make-css3-triangle-with-linear-gradient) ways to go about doing this, such as using multiple elements or a gradient. I'd recommend googling abit to find the solution that meets your needs the best. — SubjectCurio, Apr 23 '15 at 09:47
The problem with this design approach is that the half-square motif as a CSS element cannot be used in the CSS `background` property. So you will need to use CSS positioning to put it in place. This seems to be a lot of trouble to avoid creating 5 images and maybe a few more in the future. In this case, you are creating extra mark-up for a visual effect that may best be implemented using standard CSS properties. — Marc Audet, Apr 23 '15 at 10:49

score 17 · Accepted Answer · edited May 23 '17 at 12:26

If your divs have fixed sizes, you can use borders to make two triangles as described in How do CSS triangles work?:

div{
  display:inline-block;
  border-top:100px solid red;
  border-right:100px solid grey;
  }

<div></div>

To make other sizes, colors, you need to tweak the border properties :

div {
  display: inline-block;
}
div:nth-child(1) {
  border-right: 100px solid red;
  border-top: 100px solid grey;
}
div:nth-child(2) {
  border-left: 100px solid red;
  border-top: 100px solid grey;
}
div:nth-child(3) {
  border-right: 50px solid red;
  border-top: 100px solid grey;
}
div:nth-child(4) {
  border-right: 100px solid red;
  border-bottom: 50px solid grey;
}

<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

score 12 · Answer 2 · edited Nov 20 '18 at 09:00

12

You can also try linear-gradient

div {
  width: 200px;
  height: 200px;
  background: rgba(248, 80, 50, 1);
  background:linear-gradient(to bottom right,grey 50%,red 50%);
}

<div></div>

edited Nov 20 '18 at 09:00

Temani Afif

245,468
26
309
415

answered Apr 23 '15 at 09:44

Akshay

14,138
5
46
70

score 2 · Answer 3 · edited Apr 23 '15 at 09:54

You can use transform if you don't need to worry about old browser support.

.container {
  position: relative;
  overflow: hidden;
  width: 100px;
}
.square {
  width: 100px;
  height: 100px;
  background-color: #E30606;
}
.overlay {
  width: 171px;
  height: 72px;
  background-color: #D0CBCB;
  -webkit-transform: rotate(225deg);
  -moz-transform: rotate(225deg);
  -ms-transform: rotate(225deg);
  transform: rotate(225deg);
}

<div class="container">
  <div class="square">
    <div class="overlay"></div>
  </div>
</div>

http://jsfiddle.net/hT9vP/13/

How to make half-square background in css

3 Answers3

Linked

Related