この画像を境界線にするにはどうすればいいですか？

Question

私はポップアップボックスを作っていますが、カスタムボーダーがありますが、コードに正しく挿入する方法がわかりません。私はポップアップボックスか何かの上にそれを置くために方法はあり ：ここ

はボックスのコードです：

.popup_block{ 
display: none; /*--hidden by default--*/ 
background: #ffffff; 
float: left; 
font-size: 1.2em; 
position: fixed; 
top: 50%; left: 50%; 
z-index: 99999; 
/*--CSS3 Box Shadows--*/ 
-webkit-box-shadow: 0px 0px 10px #000; 
-moz-box-shadow: 0px 0px 10px #000; 
box-shadow: 0px 0px 10px #000; 
/*--CSS3 Rounded Corners--*/ 
-webkit-border-radius: 10px; 
-moz-border-radius: 10px; 
border-radius: 10px; 
} 
img.btn_close { 
float: right; 
margin: -5px -5px 0 0; 
} 
/*--Making IE6 Understand Fixed Positioning--*/ 
*html #fade { 
position: absolute; 
} 
*html .popup_block { 
position: absolute; 
}` 

<div id="02" class="popup_block"> 

<Center> text goes here 
</center></div> 

そして、ここの国境であります？内側は透明なのでオーバートップを置くとうまくいくと思います。簡単な方法がない限り。

Answer 1

また、ボーダー、画像とラッパーから固定最終的位置を使用することができます。

#poplayer { 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    /* might be usefull too 
 
    z-index: XX; 
 
    overflow:auto; 
 
    */ 
 
} 
 
#popup { 
 
    min-width: 450px; 
 
    min-height: 150px; 
 
    border-style: solid; 
 
    border-width: 47px 34px 32px 39px; 
 
    -moz-border-image: url(https://66.media.tumblr.com/a9ce6cf01114a325dcba725f18816a13/tumblr_oacf5xP6wh1vr8vsio1_1280.gif) 47 34 32 39 repeat; 
 
    -webkit-border-image: url(https://66.media.tumblr.com/a9ce6cf01114a325dcba725f18816a13/tumblr_oacf5xP6wh1vr8vsio1_1280.gif) 47 34 32 39 repeat; 
 
    -o-border-image: url(https://66.media.tumblr.com/a9ce6cf01114a325dcba725f18816a13/tumblr_oacf5xP6wh1vr8vsio1_1280.gif) 47 34 32 39 repeat; 
 
    border-image: url(https://66.media.tumblr.com/a9ce6cf01114a325dcba725f18816a13/tumblr_oacf5xP6wh1vr8vsio1_1280.gif) 47 34 32 39 fill repeat; 
 
}

<div id="poplayer"> 
 
    <div id="popup"> 
 
    whatever comes inside your popup 
 
    </div> 
 
</div>

Answer 2

私はdivタグにあなたのポップアップボックスをラップし、親divためbackground-imageとしてカスタムの境界線を配置することをお勧め。

はあなたの親divは、すべての周りpaddingとポップアップボックスは、右の空白に収まるように、それは、少し大きいこと、小さなを持っていることを確認します。

また、あなたは親の内側のボックスをポップアップすると、次のCSSコードのようなものを使用position: absoluteにあります、私は-40%代わりの-50%を使用し、上記のコードで

.popup_block { 
    /* Positioning */ 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -40%); 
    /* Other styling properties */ 
} 

を実際にはy軸上の正確な中心より少し下に配置する必要があるからです。正確な数を試して試してみる必要があるかもしれません。

あなたのHTMLはする必要があります：

<div class="popup_block-wrapper"> <!-- the parent --> 
    <div id="02" class="popup_block"> 
     <center>text goes here</center> 
    </div> 
</div> 

CSS親のために：

.popup_block-wrapper { 
    /* Positioning */ 
    position: fixed; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    /* Other styling properties */ 
}