开发者

HTML & CSS - display a partial marquee box

开发者 https://www.devze.com 2023-03-24 22:25 出处:网络
I\'m trying to get a small or \"partial\" marquee box inside a container. Basically I would like to display the 4 inner corners. Something similar to the foll开发者_C百科owing: I\'m wondering how coul

I'm trying to get a small or "partial" marquee box inside a container. Basically I would like to display the 4 inner corners. Something similar to the foll开发者_C百科owing: I'm wondering how could I do it? Any help is appreciated.

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


Something like this?

<!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>

live example: http://jsfiddle.net/vKZzD/


You mean something like this:

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

? If the height and width is unknown, you can use approaches used for generating rounded corners on 4 divs for example

0

精彩评论

暂无评论...
验证码 换一张
取 消