Elements with Css cut corners

Question

I need to make elements with cut corners, like these squares. How can I do ?

Answer 1

As you don’t want a rounded edge, I believe you won’t be able to use a border-Radius.

To simulate the "cut" in the div, you will need a possible internal div in the "cut" position. then you will color half of this div with the color of the external div and the other half with the external color.

In the example below I am assuming that the inner color is yellow and the outer color is black.

body {
  background-color: black;
}

.panel {
    height: 120px;
    background: yellow;
}

.cut {
    position: relative;
    top: 0; 
    left: 0;
    border-bottom: 40px solid yellow;
    border-left: 40px solid black;
    width: 0;
}

<div class="panel">
  <div class="cut"></div>
</div>

Answer 2

Another way to do it is by using the pseudo element ::after

See the example below:

.corner {
    width: 200px;
    height: 100px;
    background-color: red;
    position: relative;
    overflow: hidden;
}
.corner::after {
    content: "";
    position: absolute;
    z-index: 2;
    top: -15px;
    right: -15px;
    width: 30px;
    height: 30px;
    transform: rotate(45deg);
    background-color: #fff;
}

<div class="corner"></div>

In this example using the attributes top: -15px; right: -15px; width: 30px; height: 30px; vc can control the size of "cut" in the corner of div.

Answer 3

I don’t know if it will help you, but in the corner where the cut is, try placing a div with a css similar to the following:

.divCorte{
  width:0;
  height:0;
  border-bottom:120px solid #666;
  border-left: 120px solid transparent; 
  border-right: 120px solid transparent;
  transform: rotate(45deg);
}

Align it in the corner of the external div (with float+margin or position). If the background is an image, try using the "border-image" css attribute to simulate transparency. Remembering that this is CSS3, in older browsers will not work well, need to do some compatibilization.