css＆html：隱藏邊界角落

-1

我有以下用戶界面。我只想隱藏三種顏色的div的角落。css＆html：隱藏邊界角落

它應該看起來像這樣。

_ 
| | 
-

任何人都可以有想法如何隱藏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是從引導CSS回升。

來源

2015-09-06 vishal-mote

您能否提供一些代碼？ –

你的意思是圓形？ –

http://stackoverflow.com/questions/14387690/css-show-only-corner-border 這可能是一個好主意，但你必須適應你的情況。或者在每個角落放一個小白backgorund div。 – Fundhor

這是有點混亂，骯髒，但它會給出預期的結果。

#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因此爲這些「角落」添加border您會看到它是如何工作的。

您必須注意padding對於container;定位和height和width那些角落。

更新：我對角落divs的定位，height和width做了一些小改動。舊的從容器中取出太多空間div。

btw。您可以刪除height的container。我只是舉個例子。

來源

2015-09-06 18:40:11 nelek

css＆html：隱藏邊界角落

回答

相關問題