CSS：添加邊框角落中的空間

我想在左上角邊框正方形的右下角添加空白區域。目前我的代碼返回完整的方形邊框。但我想要像附加圖像這樣的邊界角落中的空間。

這是我的代碼。CSS：添加邊框角落中的空間

HTML

<div class="top-left-corner"></div>

CSS

.top-left-corner{ 
    content: ""; 
    position: absolute; 
    top:0; 
    left: 0; 
    border-right: 1px solid #7a7a7a; 
    border-bottom: 1px solid #7a7a7a; 
    height: 70px; 
    width: 70px; 
}

這裏是小提琴 FIDDLE

.top-left-corner { 
 
    content: ""; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    border-right: 1px solid #7a7a7a; 
 
    border-bottom: 1px solid #7a7a7a; 
 
    height: 70px; 
 
    width: 70px; 
 
}

<div class="top-left-corner"> 
 
</div>

來源

2016-02-02 Shivam Pandya

左上角（或右下角）？在你的圖像看起來像右下角。（不是重複的，但在這個線程的答案應該給你的想法 - http://stackoverflow.com/questions/31205386/how-to-add-border-to-a-container-with-transparent-gaps-in-之間/ 31205824＃31205824） – Harry

是的，該角落位於頁面的左上角，但我想要在右下角的邊框。感謝您的糾正。 –

你可以使用before和after僞做選擇器：

.top-left-corner { 
 
    top:0; 
 
    left:0; 
 
    position: absolute; 
 
    height: 70px; 
 
    width: 70px; 
 
} 
 

 
.top-left-corner:after { 
 
    content:''; 
 
    position:absolute; 
 
    bottom:0; 
 
    left:0; 
 
    right:20px; /*change this for the size of the gap*/ 
 
    border-bottom: 1px solid #7a7a7a; 
 
} 
 

 
.top-left-corner:before { 
 
    content:''; 
 
    position:absolute; 
 
    top:0; 
 
    right:0; 
 
    bottom:20px;  /*change this for the size of the gap*/ 
 
    border-right: 1px solid #7a7a7a; 
 
}

<div class="top-left-corner"></div>

來源

2016-02-02 12:22:28 Pete

完美:)謝謝 –

不客氣，很高興我可以幫助:) – Pete

你能不能做這樣的事情（如果你知道你的廣場後面的背景顏色 - https://jsfiddle.net/pz7rcg4u/3/

.top-left-corner:after{ 
content: ""; 
position: absolute; 
bottom:-1px; 
right: -1px; 
z-index: 1; 
height: 10px; /* size of white space */ 
width: 10px; 
border-right: 1px solid #F3F5F6; 
border-bottom: 1px solid #F3F5F6; /* color of white space */

}

來源

2016-02-02 12:20:44 JHair

謝謝，這是我需要:) –

CSS：添加邊框角落中的空間

回答

相關問題