css& html：隐藏边框的一角 [英] css & html : Hide corner of the borders

问题描述

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

I have following UI. I want to hide only corner of the div of three colors.

它应该看起来像这样。

 _
| |
 -

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

Can Anyone has idea how to hide the corners of the div borders.

这是我要求的代码

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中获取。

Other css is picking up from bootstrap css.

推荐答案

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

This is little messy, dirty, but it will give desired result.

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

But, point is: background-color of page, container div and that divs for corners must be same color.

小提琴示例所以为那些角落添加 border 你会看到它是如何工作的。

There is fiddle example so adding border for those "corners" You'll see how it's working.

你必须付钱注意填充 容器;这些角落的定位和高度和宽度。

You have to pay attention for padding for container; positioning and height and width for those corners.

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

Update : I made just little changes about positioning, height and width of corner divs. Old one take too much space out of container div.

btw。您可以为容器删除 height 。我只是举个例子。

btw. You can remove height for container. I set it just for example.

这篇关于css& html：隐藏边框的一角的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！