问题
I have following UI. I want to hide only corner of the div of three colors.
it should be look like something this.
_
| |
-
Can Anyone has idea how to hide the corners of the div borders.
Here is my code as asked for
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;
}
Other css is picking up from bootstrap css.
回答1:
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>But, point is: background-color of page, container div and that divs for corners must be same color.
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.
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. You can remove height for container. I set it just for example.
来源：https://stackoverflow.com/questions/32426718/css-html-hide-corner-of-the-borders