Make edge effects in CSS such as chamfer

Question

I need to do some effects on the edges of images and rectangles, as in the image below:

Notice that they are in the corners, in the gray rectangle this in the top right, in the images in the base left.

I was able to do it, but only as a borde-Radius using this code:

 border: 10px solid #cb3527; 
    border-radius: 0px 15px 15px 15px;
    background-color: #cb3527;

Stayed like this:

In short, I need it to look like the first image, I think it’s a bevel effect!

Answer 1

For solid colors

In the case of solid colors to cut the edge with CSS, or chamfer a corner with CSS you can consult here: Transparenet beveled edge with css only

---

For images

I suggest this technique. You can make a mask on the image using -webkit-mask-image support is relatively good, leaving only the IE out as you can refer here: https://caniuse.com/#feat=css-masks

The idea is that if you have a gradient with the colors black and transparent, everything below the color black will appear, so I left the gradient on -135deg (to stay in the bottom left corner @Wictorchaves. Obs.) so it will be the angle of the "chamfer" and having 90% of the area in black, so the triangle "cut" in the corner represents 10% of the total size, this can help you adjust the chamfer size as you want. Ali vc tb can use measures in px if you want

html, body {
    width: 100%;
    height: 100%;
margin:0;
    background-image: linear-gradient(red 0, blue 120px);
}
img {
    -webkit-mask-image: linear-gradient(-135deg, #000000 90%, transparent 90%);

}

<img src="https://placecage.com/200/100" alt="">