css＆amp; html：隐藏边框的一角

Question

我有以下用户界面。我想只隐藏三种颜色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中获取。

Answer 1

这有点乱，脏，但会产生预期的效果。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

但是，点是：background-color页面，容器div和角落的divs必须是相同的颜色。

有fiddle example因此为那些＆＃34;角落＆＃34;添加border你会看到它是如何运作的。

您必须注意padding的{​​{1}};为这些角落定位并container和height。

更新：我对角落width的定位，height和width稍作修改。旧的从容器divs中占用太多空间。

顺便说一句。您可以删除div的{​​{1}}。我只是举个例子。