使用CSS創建自定義邊框，只顯示角落

以下是您的CSS謎題。我想創建一個邊境就在文本字段中的角落，像下面的圖片：使用CSS創建自定義邊框，只顯示角落

我想過創造200個矩形的div，一個藍色邊框和其他白色，然後覆蓋它們，但是這看起來並不很優雅（例如，如果我想改變背景，它不會很好）。

任何想法，我可能會這樣做嗎？

編輯：

這裏的HTML：

<div class="blue white1 white">text</div> 

.blue { 

border: blue 4px solid; 
etc.. 
}

來源

2013-07-05 alias51

使用一個DIV，並靶向一個節點。 http://jsfiddle.net/eCEds/2/

HTML：

<div class="blue white1 white"><p>Text</p></div>

CSS：

.blue {position:relative;width:400px;height:300px;} 
.blue:before, .blue:after, .blue>:first-child:before, .blue>:first-child:after { 
    position:absolute; 
    width:80px; height: 80px; 
    border-color:blue; 
    border-style:solid; 
    content: ' '; 
} 
.blue:before {top:0;left:0;border-width: 4px 0 0 4px} 
.blue:after {top:0;right:0;border-width: 4px 4px 0 0} 
.blue>:first-child:before {bottom:0;right:0;border-width: 0 4px 4px 0} 
.blue>:first-child:after {bottom:0;left:0;border-width: 0 0 4px 4px}

來源

2013-07-05 13:08:07 Omega

這很漂亮。在我的解決方案中使用IE10。比其他一切都更清潔。 –

你的意思是這樣的：http://jsfiddle.net/FlameTrap/F5bC6/

HTML

<div class="text"> 
    <span class="corner TL"></span> 
    <span class="corner TR"></span> 
    <span class="corner BL"></span> 
    <span class="corner BR"></span> 
    <div class="text">Text</div> 
</div>

CSS

.text { 
    background: #fff; 
    width: 300px; 
    height: 200px; 
    position: relative; 
    z-index: 3; 
} 
.corner { 
    position: absolute; 
    background: blue; 
    width: 20px; 
    height: 20px; 
    z-index: 2; 
} 
.TL { 
    top: -10px; 
    left: -10px 
} 
.TR { 
    top: -10px; 
    right: -10px 
} 
.BL { 
    bottom: -10px; 
    left: -10px 
} 
.BR { 
    bottom: -10px; 
    right: -10px 
}

來源

2013-07-05 13:05:45

像這樣的工作，讓你少問題，在舊版瀏覽器的啓動：

<style> 
.blue { 
    width: 500px; 
    height: 500px; 
    position: relative; 
} 
.corner { 
    position: absolute; 
    border-color: blue; 
    width: 30px; 
    height: 30px; 
} 
.tl { 
    top: 0; 
    left: 0; 
    border-top: 2px solid; 
    border-left: 2px solid; 
} 
.tr { 
    top: 0; 
    right: 0; 
    border-top: 2px solid; 
    border-right: 2px solid; 
} 

.br { 
    bottom: 0; 
    right: 0; 
    border-bottom: 2px solid; 
    border-right: 2px solid; 
} 

.bl { 
    bottom: 0; 
    left: 0; 
    border-bottom: 2px solid; 
    border-left: 2px solid; 
} 
</style> 

<div class="blue"> 
    <div class="tl corner"></div> 
    <div class="tr corner"></div> 
    <div class="bl corner"></div> 
    <div class="br corner"></div> 
</div>

來源

2013-07-05 13:10:05 Atari

.text 
 
{ 
 
    border: 1px solid #00f; 
 
    height: 200px; 
 
    position: relative; 
 
    width: 200px; 
 
} 
 
.text:after 
 
{ 
 
    position:absolute; 
 
    top: 10%; 
 
    height: 80%; 
 
    content: ""; 
 
    width: 99%; 
 
    left: -3px; 
 
    border-left: 5px solid #fff; 
 
    border-right: 5px solid #fff; 
 
} 
 
.text:before 
 
{ 
 
    position:absolute; 
 
    left: 10%; 
 
    height: 99%; 
 
    content: " "; 
 
    width: 80%; 
 
    top: -3px; 
 
    border-top: 5px solid #fff; 
 
    border-bottom: 5px solid #fff; 
 
}

<div class="text">test test gfgfgf gfg f</div>

這是我的變種。

來源

2013-07-05 13:12:02 jQuery00

類似這樣的東西可以通過CSS漸變和多種背景實現：。但是SVG背景可能更適合這種情況。

來源

2013-07-05 13:15:09

使用CSS創建自定義邊框，只顯示角落

回答

相關問題