| |
|
|
| | Здравствуйте!
Всем известно что контейнер див всегда прямоугольной формы, но возможно ли ему задать какую не-будь другую геометрическую форму?
Кто знает, как сделать его в форме равнобокой трапеции?
Или хотя-бы его фон сделать таковым. | |
| |
|
|
| |
|
|
| |
для: sasha12342
(01.11.2013 в 15:43)
| | | Никак, только наклонить в CSS3. Но можно два дива дочерних наклонить, удалив у каждого бордюр соответствующий, и перекрыть остатки их верхних бордюров вне трапеции:
<style>
.bx {
width: 400px;
height: 200px;
position: relative;
margin: 60px auto;
}
.d1 {
width: 400px;
height: 200px;
position: absolute;
left: 0;
top: 0;
border: 1px solid #000;
border-right: 0;
-moz-transform: skewX(-15deg);
-ms-transform: skewX(-15deg);
-webkit-transform: skewX(-15deg);
-o-transform: skewX(-15deg);
transform: skewX(-15deg);
z-index: 1;
}
.d2 {
width: 400px;
height: 200px;
position: absolute;
right: 0;
top: 0;
border: 1px solid #000;
border-left: 0;
-moz-transform: skewX(15deg);
-ms-transform: skewX(15deg);
-webkit-transform: skewX(15deg);
-o-transform: skewX(15deg);
transform: skewX(15deg);
z-index: 2;
}
[class|=clr] {
position: absolute;
width: 55px;
height: 1px;
background: #fff;
z-index: 3;
}
.clr-1 {left: -28px}
.clr-2 {right: -28px}
</style>
<div class="bx">
<div class="clr-1"></div>
<div class="clr-2"></div>
<div class="d1"></div>
<div class="d2"></div>
</div>
|
Вне CSS3 только картинками имитировать. | |
| |
|
|
| |
|
|
| |
для: confirm
(01.11.2013 в 17:08)
| | | Спасибо большое за ответ!
Походу с CSS3 всё можно реализовать...
Жаль что нет возможности изучить его досконально. | |
| |
|
|
|
| |
|
|
| |
для: Deed
(01.11.2013 в 18:04)
| | | Спасибо за ссылку! Альтернативный вариант. | |
| |
|
|
