css & html：隐藏边框的一角[关闭]

我有以下用户界面。我只想隐藏三种颜色的 div 的一角。

它应该看起来像这样。

 _
| |
 -

任何人都可以知道如何隐藏 div 边框的角。

这是我要求的代码

html :-

<div class="main">
    <div class="container">
        <div class="row container-row green-border">
            <div class="col-md-12">

            </div>                              
        </div>                              
    </div>                              
</div>

Css :-

.container {
    border: 5px solid white; 
    box-shadow: 0 0 0 5px orange;
}
.green-border {
    border: 5px solid green; 
}

其他 css 是从 bootstrap css 中获取的。

这有点凌乱、肮脏，但它会给出预期的结果。

#container
{
    position:relative;
    top:20px;
    left:20px;
    width:200px;
    height:200px;
    border:solid 1px black;
    padding:10px;
}
#tl, #tr, #bl, #br
{
    position:absolute;
    width:10px; height:10px;
    background-color:white;
    display:block;
}
#tl {top:-1px; left:-1px;} /*top left corner*/
#tr {top:-1px; right:-1px;} /*top right*/
#bl {bottom:-1px; left:-1px;} /*bottom left*/
#br {bottom:-1px; right:-1px;} /*bottom right */

<div id="container">
    <div id="tl"></div>   
    <div id="tr"></div>
    <div id="bl"></div>
    <div id="br"></div>
    Hello there
</div>

但是，重点是：background-color页面、容器的数量div然后divs角必须是相同的颜色。

有小提琴的例子 https://jsfiddle.net/affezr0g/1/所以添加border对于那些“角落”，您会看到它是如何工作的。

你必须注意padding for container;定位和height and width对于那些角落。

更新：我对定位做了一些小小的改变，height and width角落的divs。旧的占用容器太多空间div.

顺便提一句。您可以删除height for container。我设置它只是为了举例。