Question

这是我想要做的事情 -

enter image description here

我知道在css中创建一个框很容易，并且给边框的任何一边都更容易。但是我怎样才能使用css来获得这种形状。

然而我尝试了这个东西，我只能使用两个div（一个白色背景）。

我试过了 -

CSS

.box
{
    height:100px;
    width:200px;
    border:10px solid #111;

    z-index:1;

}
h1
{
    text-align:center;
    vertical-align:middle;
    position:relative;

}
.transparent-border
{
    position:absolute;
    z-index:2;
    height:20px;
    width:170px;

    left:30px;
    background:white;

}

HTML

<div class="transparent-border"></div>
<div class="box"><h1>ABC</h1>
</div>

的jsfiddle

Border division

Answer 1

有一个简单的解决方案：在伪元素之前和之后。

以下是一个示例：jsFiddle

.box:before {
    position:absolute;
    top:-10px; 
    left:10%;
    content:"";
    display:block;
    height:10px;
    width:80%;
    background:white;
}

.box:after {
    position:absolute;
    bottom:-10px; 
    left:10%;
    content:"";
    display:block;
    height:10px;
    width:80%;
    background:white;
}

您将position:relative分配给div.box。然后分配position:absolute to :before和:after元素。然后应用白色背景并使用顶部和底部将其放置在黑色边框上。伪元素的高度必须等于box.div。

的边框宽度

Answer 2

html：只有一个div

<div class="border">
    <h1>ABC</h1>
</div>

css：白色background-color和否定margin

.border
{
    border:10px solid #111;
    width:200px;
}

h1
{
    background-color: white;  /* most important part */
    margin: -10px 10px;       /* most important part */

    text-align:center;

    padding: 20px;
}

jsFiddle

Answer 3

增加透明边框的高度并将文字推到顶部：

.box {
    height:100px;
    width:200px;
    border:10px solid #111;
    z-index:1;
}
h1 {
    text-align:center;
    vertical-align:middle;
    position:relative;
    z-index:3;     
}
.transparent-border {
    position:absolute;
    z-index:2;
    height:120px;
    width:170px;   
    left:30px;
    background:white;  
}

Answer 4

这样做

<style type="text/css">
  .b:after{content:"]"}
  .b:before{content:"["}
</style>

<span class="b">text</span>

Answer 5

如果您的背景颜色为纯色，则可以轻松实现。

内部元素具有坚固的BG颜色，并且以负的垂直边距被拉到外部元素的边界上。但是你也给内部元素一些水平边距，所以外部元素的边界最终看起来像括号：

<div class="outside">
    <div class="inside">ABC</div>
</div>


.outside {
    border:10px solid #111;
    display:inline-block;
}
.inside {
    background:#fff;
    padding:20px;
    margin:-10px 10px;
}

http://jsfiddle.net/Gasdj/11/

伪元素解决方案在多行文本上中断。

CSS：我如何将边框分成两行？

5 个答案: