HTMLとCSS - 部分的なマーキーボックスを表示

私は、コンテナの中に小さなか「部分的な」マーキーボックスを取得しようとしています。基本的に私は4つの内側のコーナーを表示したいと思います。次のようなもの：私はそれをどうすればいいのだろうか？どんな助けもありがとうございます。HTMLとCSS - 部分的なマーキーボックスを表示

<div style='padding: 15px'> 
    <div style='background: url(...)'></div> 
    </div>

：あなたはこのような何かを意味

+--------------------------------------------+ ---> this is main container 
    | +--         --+ | 
    | |          | | 
    |           | 
    |           | 
    |           | 
    |           | 
    |           | 
    | |          | | 
    | +--         --+ | 
    +--------------------------------------------+

出典

2011-08-04 MikeDarrow

あなたはそれがどのように見えるべきかの画像例を持っていますか？ – OverZealous

何かこれは何か？

<!DOCTYPE html> 
<html> 
    <head></head> 
    <body> 
     <div id='the_container' style='border: 1px solid #000; width:90%; height:90%; top: 5%; left: 5%; position: absolute;'> 
      <div id='corner_t_l' style='border-top: 1px dashed #000; border-left: 1px dashed #000; top: 10px; left: 10px; width: 30px; height: 30px; position: absolute;'></div> 
      <div id='corner_t_r' style='border-top: 1px dashed #000; border-right: 1px dashed #000; top: 10px; right: 10px; width: 30px; height: 30px; position: absolute;'></div> 
      <div id='corner_b_r' style='border-bottom: 1px dashed #000; border-right: 1px dashed #000; bottom: 10px; right: 10px; width: 30px; height: 30px; position: absolute;'></div> 
      <div id='corner_b_l' style='border-bottom: 1px dashed #000; border-left: 1px dashed #000; bottom: 10px; left: 10px; width: 30px; height: 30px; position: absolute;'></div>  </div> 
    </body> 
</html>

ライブ例：http://jsfiddle.net/vKZzD/

出典

2011-08-04 02:24:44 micha

完璧ですね！どうもありがとう！ – MikeDarrow

？高さと幅が不明な場合は、4つのdivに丸い角を生成するための手法を使用できます。

出典

2011-08-04 02:19:43 mkk

それはうまくいくでしょうが、実際には各コーナーのボーダーとdivを使用しています。それは実現可能でしょうか？ – MikeDarrow

HTMLとCSS - 部分的なマーキーボックスを表示

答えて

関連する問題