01.09.2013 15:35:54 сдвигается параллелограмм Сообщение #1
Дмитрий184
Мастер
Дата регистрации:
29.06.2012 08:48:56
Сообщений: 225
Здравствуйте!
Столкнулся с такой проблемой. Создал контейнер родитель, задал ему относительное позиционирование. В этом контейнере создал параллелограмм и задал ему абсолютное позиционирование относительно контейнера родителя. И возникает проблема - когда я через firebug увеличиваю высоту параллелограмма, то он почему-то начинает выезжать из контейнера родителя?
Может кто подскажет как увеличивать высоту параллелограмма, чтобы он не "выезжал" за контейнер?
<html>
<head>
<style type="text/css">
#wrapper {
position: relative;
border: 3px solid #080;
width: 500px;
padding-top: 50px;
}
#parallelogram {
position: absolute;
top: 0;
right: 0px;
border: 3px solid #800;
font: 20px arial, sans-serif;
-webkit-transform: skew(-20deg);
-moz-transform: skew(-20deg);
-o-transform: skew(-20deg);
background-color: #ff8;
min-height: 20px;
}
span {
display: inline-block;
-webkit-transform: skew(20deg);
-moz-transform: skew(20deg);
-o-transform: skew(20deg);
}
</style>
</head>
<body>
<div id="wrapper">
<div id="parallelogram">
<span>ТЕКСТ</span>
</div>
</div>
</body>
</html>
Столкнулся с такой проблемой. Создал контейнер родитель, задал ему относительное позиционирование. В этом контейнере создал параллелограмм и задал ему абсолютное позиционирование относительно контейнера родителя. И возникает проблема - когда я через firebug увеличиваю высоту параллелограмма, то он почему-то начинает выезжать из контейнера родителя?
Может кто подскажет как увеличивать высоту параллелограмма, чтобы он не "выезжал" за контейнер?
<html>
<head>
<style type="text/css">
#wrapper {
position: relative;
border: 3px solid #080;
width: 500px;
padding-top: 50px;
}
#parallelogram {
position: absolute;
top: 0;
right: 0px;
border: 3px solid #800;
font: 20px arial, sans-serif;
-webkit-transform: skew(-20deg);
-moz-transform: skew(-20deg);
-o-transform: skew(-20deg);
background-color: #ff8;
min-height: 20px;
}
span {
display: inline-block;
-webkit-transform: skew(20deg);
-moz-transform: skew(20deg);
-o-transform: skew(20deg);
}
</style>
</head>
<body>
<div id="wrapper">
<div id="parallelogram">
<span>ТЕКСТ</span>
</div>
</div>
</body>
</html>
