Elements with corners cut with Css

As you do not want a rounded border, I do not think you can use a border-radius.

To simulate the "cut" in the div, you'll need an internal div set to the "cut" position. then you will color half of this div with the color of the outer div and the other half with the outer color.

In the example below I'm 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>

Another way to do this is to use 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 top: -15px; right: -15px; width: 30px; height: 30px; attributes you can control the size of the "cut" in the corner of the div

I do not know if it will help you, but in the corner where the cut is, try putting 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 her in the corner of the div that will be externally (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 it will not work well, need to do some compatibilization.