CSSの境界線の右のスタイル

Question

私のメインのdiv（ボックス）が次のようなものになるデザインをしたいと思っています。あなたは同じことを設計する際に私を助けてくれますか？

Answer 1

あなたは:after擬似要素

div { 
 
    width: 250px; 
 
    height: 150px; 
 
    border: 2px solid #677D50; 
 
    border-bottom: 20px solid #677D50; 
 
    margin: 50px; 
 
    background: white; 
 
    position: relative; 
 
} 
 
div:after { 
 
    content: ''; 
 
    position: absolute; 
 
    right: 0; 
 
    top: 0; 
 
    width: 70px; 
 
    height: 70px; 
 
    background: white; 
 
    border-bottom: 2px solid #677D50; 
 
    transform: rotate(46deg) translateY(-52px); 
 
}

<div></div>

それともSVG

rect { 
 
    fill: #677D50; 
 
} 
 
polygon { 
 
    fill: none; 
 
    stroke: #677D50; 
 
    stroke-width: 2; 
 
    stroke-miterlimit: 10; 
 
}

<svg x="0px" y="0px" width="400px" height="250px" viewBox="0 0 400 250"> 
 
    <polygon points="378,230 24.5,230 24.5,20.5 339,20.5 378,52.5 " /> 
 
    <rect x="24.5" y="203" width="353.5" height="27" /> 
 
</svg>

01を使用することができます