css & html : 隐藏边框的一角

Question

我关注 UI。我只想隐藏三种颜色的 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

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

#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 必须是相同的颜色。

有 fiddle example 所以为那些 "corners" 添加 border 你会看到它是如何工作的。

你要注意 padding 因为 container;这些角落的定位和 height 和 width。

更新：我对角 divs 的定位 height 和 width 做了一些小改动。旧的从容器 div.

中取出太多 space

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

css & html : 隐藏边框的一角

css & html : Hide corner of the borders

html

css

bootstrap-modal