Schneiden eines Dreiecks aus dem Quadrat

Question

Ich versuche, eine Form eines Dreiecks ein Quadrat zu schneiden.

Ich habe versucht, mit diesem Code, aber es erstellt nicht die Form, die ich will.

.square-cut{ 
 
    font-size: 0px; line-height: 0%; width: 0px; 
 
    border-top: 20px solid purple; 
 
    border-bottom: 20px solid purple; 
 
    border-right: 40px solid white; 
 
}

<div class="square-cut"></div>

Die Form ich will, ist dies:

Answer 1

Wie ist das (Kommentare in Code):

/* make arrow as after pseudo element*/ 
 
.square-cut:after { 
 
    content: ''; 
 
    display: block; 
 
    line-height: 0%; 
 
    font-size: 0px; 
 
    background: purple; 
 
    border-top: 20px solid purple; 
 
    border-bottom: 20px solid purple; 
 
    border-left: 40px solid white; 
 
} 
 
.square-cut { 
 
    box-sizing: border-box; 
 
    width: 50px; /* as arrow is 40px x 40px, this gives 10px under the tip*/ 
 
    height: 50px; 
 
    padding: 5px 0; /* 5px on either side offat side of the arrow */ 
 
    background: purple; 
 
    font-size: 0px; 
 
}

<div class="square-cut"></div>