CSS border right styling

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>