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>