Как сделать CSS - angles-image + background?А высота - 100% или авто? - PullRequest
Новая
       6

Как сделать CSS - angles-image + background?А высота - 100% или авто?

0 голосов
/ 08 сентября 2010

Я уже много раз делал CSS, но не сработало и много глюков ... покажу картинку - глюк: Смотрите картинку - http://beta.areku -developstudio.org.ua / new.png

Смотри картинку (это необходимо, так как лучшего качества): Смотрите изображение2 - http://beta.areku -developstudio.org.ua / new2.png

Как сделать CSS - angles-image + background?А высота - 100% или авто? Пример HTML: 

<div id="conteiner" class="main">
    <div class="top_left_corner">
        <div class="top_right_corner">
            <div class="bottom_left_corner">
                <div class="bottom_right_corner">
                    <div id="content">
                        <br/><br/>
                        Hello Areku<br/>
                        Hello Areku<br/>
                    </div>
                    <br/><br/>
                </div>
            </div>
        </div>
    </div>    
</div>

Выберите другие способы сделать CSS + HTML.Может ли JQuery?Жду ответа ...С уважением, Ареку!

1 Ответ

0 голосов
/ 08 сентября 2010

Вы можете сделать это с помощью творческого использования свойства background для различных элементов: 

<html>
  <body>
     <div id="content">
        Your content
     </div>
     <div class="corner right"></div>
     <div class="corner left"></div> 
  </body>
</html>

Тогда CSS будет выглядеть следующим образом: 

/* Following 2 rules create min-height 100% for your content and body */
html,
body {
  height: 100%;
}

#content {
  min-height: 100%;
}

/* html and body create the fixed position bottom right/left corners */
html {
  background: url(bottom-right.png) no-repeat fixed 100% 0;
}

body {
  background: url(bottom-left.png) no-repeat fixed 0 0;
}

/* top right/left corners are handled by 2 divs */
.corner {
  position: fixed;
  top: 0;

  width: 50px;  /* width of your background image corner */
  height: 50px; /* height of your background image corner */    
}

.left {
  left: 0;
  background: url(top-left.png) no-repeat 100% 0;
}

.right {
  right: 0;
  background: url(top-right.png) no-repeat 100% 0;
}
...