3

これは私がやろうとしていることです-

ここに画像の説明を入力

css でボックスを作成するのは簡単で、境界線の任意の側を指定する方が簡単であることは知っています。しかし、css のみを使用してこの形状を取得するにはどうすればよいですか。

しかし、私はこれを試してみました.2つの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

国境分割

4

5 に答える 5

4

:before および :after 疑似要素を使用した簡単な解決策があります。

以下に例を示します。

.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:relativediv.boxに割り当てます。position:absolute to :before次に、および:after要素を割り当てます。次に、白い背景を適用し、上下を使用して黒い境界線に配置します。疑似要素の高さは、box.div のボーダー幅と等しくなければなりません。

于 2013-06-30T14:02:55.470 に答える
1

html: 1 つだけ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;
}

jsフィドル

于 2013-06-30T14:10:32.563 に答える
0

透明ボーダーの高さを増やし、テキストを上に押します。

.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;  
}
于 2013-06-30T14:00:21.857 に答える
0

背景が単色の場合、簡単な方法があります。

内側の要素は無地の 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/

疑似要素ソリューションは、複数行のテキストで壊れます。

于 2013-06-30T14:28:30.520 に答える