HTML & CSS - display a partial marquee box
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
加载中,请稍侯......
精彩评论