How to Make Half-Square Background in CSS

How to make half-square background in css

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>

How can I color a square div with two colors?

You don't need to use pseudo-selectors here, use linear-gradient instead:

background: linear-gradient(to right, #fff 50%,#000 50%);

Here's a fiddle: http://jsfiddle.net/dbbtxL50/

CSS Square background - image

All you need is one conic-gradient:

.container {
  width: 398px;
  height: 198px;
  margin: 0 auto;
  background:
    conic-gradient(from 90deg at 2px 2px,
      red 90deg,#0000 0) -2px -2px/50px 50px;
}

<div class="container">

</div>

How to color a div half blue, half yellow?

You can do this:

Here is the JSFiddle demo

Snippet Example

 div{

     width:400px;

     height:350px;

     background: linear-gradient(to right, blue 50%, yellow 50%);

    }

<div></div>

CSS: Circle with half one color and the other half another color?

A linear-gradient will do that, and use border-radius to make it a circle.

div {

  width: 50vw;

  height: 50vw;

  background: linear-gradient( -45deg, blue, blue 49%, white 49%, white 51%, red 51% ); 

  border-radius: 50%;

}

<div></div>

CSS second half background which goes from one edge to another

See this reference here:
https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient

The gradient you want would be:

background: linear-gradient(to bottom left, #cf0529 50%, transparent 50%);

Is it possible to make a transparent square on a semi-transparent background?

A nice trick to get the same effect, is to use a box-shadow on the overlay:

.overlay {
    box-shadow: 0px 0px 1px 100vmax rgba(0,0,0,0.5);
}

In this case, 100vmax fills up the whole page.

Half circle with CSS (border, outline only)

You could use border-top-left-radius and border-top-right-radius properties to round the corners on the box according to the box's height (and added borders).

Then add a border to top/right/left sides of the box to achieve the effect.

Here you go:

.half-circle {
    width: 200px;
    height: 100px; /* as the half of the width */
    background-color: gold;
    border-top-left-radius: 110px;  /* 100px of height + 10px of border */
    border-top-right-radius: 110px; /* 100px of height + 10px of border */
    border: 10px solid gray;
    border-bottom: 0;
}

WORKING DEMO.

Alternatively, you could add box-sizing: border-box to the box in order to calculate the width/height of the box including borders and padding.

.half-circle {
    width: 200px;
    height: 100px; /* as the half of the width */
    border-top-left-radius: 100px;
    border-top-right-radius: 100px;
    border: 10px solid gray;
    border-bottom: 0;

    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

UPDATED DEMO. (Demo without background color)

How do I create a circle or square with just CSS - with a hollow center?

Try This

div.circle {

  -moz-border-radius: 50px/50px;

  -webkit-border-radius: 50px 50px;

  border-radius: 50px/50px;

  border: solid 21px #f00;

  width: 50px;

  height: 50px;

}

div.square {

  border: solid 21px #f0f;

  width: 50px;

  height: 50px;

}

<div class="circle">

  <img/>

</div>

 <hr/>

<div class="square">

  <img/>

</div>

---

Related Topics