正方形から三角形を切り取る

Question

私は正方形を切り取った三角形の形を作りようとしています。

私はこのコードを使用しようとしましたが、私が望む形を作成しませんでした。

.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>

私が欲しい形状はこれです：

Answer 1

この（コード内のコメント）です方法：

/* 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>