WEB-нотатки - записник он-лайн

Цікавий спосіб зробити масштабовані блоки із закругленими кутами.

Код для цього методу дуже простий. У нас є один контейнер div в якому розташовані один під іншим 4 контейнера div з одним і тим же фоновим зображенням. При цьому за допомогою css кожен блок позиціонується так, щоб розташовуватися в потрібному кутку батьківського контейнера.

HTML код:

Code

CSS код:

Code

.cornerBox {
  position:relative;
  background:#cfcfcf;
  width:100%;
}
.corner {
  position:absolute;
  width:10px;
  height: 10px;
  background: url('corners.gif') no-repeat; font-size: 0%;
}
.cornerBoxInner { padding: 10px; }
.TL { top: 0; left: 0; background-position: 0 0; }
.TR { top: 0; right: 0; background-position: -10px 0; }
.BL { bottom: 0; left: 0; background-position: 0 -10px; }
.BR { bottom: 0; right: 0; background-position: -10px -10px; }

Зображення:

Як бачите в нашому випадку використовується тільки одне зображення у вигляді кола розміром: 20 × 20, яке можна подумки розділити на 4 зображення для куточків розміром 10 × 10. За допомогою зміни положення фонового зображення ми можемо уникнути необхідності використовувати 4 зображення.

Приклад: