How to make half-square background in css


Tags: css,css-shapes

Problem :

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.



Solution :

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>


    CSS Howto..

    How to apply this sidebar to all pages using CSS?

    How do I set jQuery accordion default to unopened? And toggle open/closed?

    How to add a twitter-bootstrap icon as a CSS background-image?

    How can I have % of width of an img wrapped in a specific div width?

    How to calculate the length in pixels of a string with php - from another page on my website

    How to make my container grow accordingly to its containers inside him?

    How to apply a css class for jqGrid height property setGridHeight?

    How can I make my form field have a background image?

    how to replace a link name text

    How to prevent CSS in dynamically added HTML content from overriding my JSP's CSS content?

    How to imitate the native iPhone look and feel in a web app developed with the ASP.NET platform?

    How to disable inline CSS position attribute

    how to make background 100% on a top menu

    How can I resize my iframe keeping the ratio?

    How to apply background-color: css only in a webkit browser

    How can i make an icon blink using CSS/javascript/jquery [duplicate]

    How to add styling (CSS) to tags in Javascript/Jquery

    How to put borders closer to the text and image and make background gray in CSS?

    How to change CSS background-position for the X axis only? [duplicate]

    How do I wrap and set CSS properties to achieve the depicted results?

    How to remove all elements except for one, maintaing the same CSS path to it?

    Hide all div element but show first two

    Any ideas how to display divs vertically in bootstrap container?

    Window resize shifts buttons to the bottom of the page. How to fix the css in this page?

    How to make div disappear when clicking outside?

    How to remove floats so items don't wrap with CSS only in this Codepen

    How to make the opacity layer same size as img

    How to let an object not take up its natural width

    How to get the value of css property with jQuery

    Show s horizontally in a div
    table { display: inline-block; } This should work just fine for you....
    Read more