ReSQL.ru
     
powered by simpleCommunicator - 2.0.61     © 2026 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Кроссбраузерный "резиновый" параллелограм без картинок с помощью css.
32 сообщений из 32, показаны все 2 страниц
  все  
Кроссбраузерный "резиновый" параллелограм без картинок с помощью css.
    #38102410
son6ka
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
son6ka
Участник
Здравствуйте.

Нужно сверстать блоки, нарисованные параллелограммами. Блоки тянутся по горизонтали. Внутри - текст. Можно ли обойтись без картинок и псевдоклассов?

Пробовала использовать :before/:after для прямоугольного дива и рисовать по краям треугольники вот так:
Код: css
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
:before{
    content: '';
    width: 0px;
    height: 10px;
    position: absolute;
    top: 0;
    left: 0;
    border-bottom: 20px solid red; 
    border-left: 20px solid transparent;
}
:after{
   content: '';
    width: 0px;
    height: 10px;
    position: absolute;
    top: 0;
    right: 0;
    border-top: 20px solid red; 
    border-right: 20px solid transparent;  
}


Но не могу разобраться с позиционированием.

Помогите, пожалуйста, кто в курсе. Или подскажите другой способ.

Мучала transform, но
а) никак не соображу, как применячть трансформацию только ко внешнему диву, не трогая текст
б) нужна поддержка IE8.
...
Рейтинг: 0 / 0
08.01.2013, 18:57
| Ответить | Цитировать | Написать  
Кроссбраузерный "резиновый" параллелограм без картинок с помощью css.
    #38102685
Фотография iConst
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
iConst
Участник
son6ka,

Это так:
...
Рейтинг: 0 / 0
08.01.2013, 23:47
| Ответить | Цитировать | Написать  
Кроссбраузерный "резиновый" параллелограм без картинок с помощью css.
    #38102850
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
son6kaНужно сверстать блоки, нарисованные параллелограммами.
Там чего только нет...
http://habrahabr.ru/post/126207/
...
Рейтинг: 0 / 0
09.01.2013, 09:10
| Ответить | Цитировать | Написать  
Кроссбраузерный "резиновый" параллелограм без картинок с помощью css.
    #38103052
son6ka
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
son6ka
Участник
krvsa,ага, смешно. Только как насчет читать первый пост, а потом уже упражняться в остроумии?)
...
Рейтинг: 0 / 0
09.01.2013, 11:26
| Ответить | Цитировать | Написать  
Кроссбраузерный "резиновый" параллелограм без картинок с помощью css.
    #38103126
Фотография Antonariy
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Antonariy
Участник
a) Никак, но есть парочка walkaround: 1) Применить к тексту обратную трансформацию. 2) Выводить текст в отдельном блоке и позиционировать его поверх трансформированного.
б) Для IE8 потребуется отдельное решение на vml.

son6kaИли подскажите другой способ.Вам шашечки или ехать? Если шашечки, см выше. Если ехать, делайте картинки, сэкономите кучу времени.
...
Рейтинг: 0 / 0
09.01.2013, 12:03
| Ответить | Цитировать | Написать  
Кроссбраузерный "резиновый" параллелограм без картинок с помощью css.
    #38103279
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
son6kaТолько как насчет читать первый пост, а потом уже упражняться в остроумии?)
Встречный вопрос - как насчет приложить свой нтелект к тому, на что я дал ссылку?
...
Рейтинг: 0 / 0
09.01.2013, 13:20
| Ответить | Цитировать | Написать  
Кроссбраузерный "резиновый" параллелограм без картинок с помощью css.
    #38103303
son6ka
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
son6ka
Участник
Antonariy, спасибо, оба варианта уже рассматривала.
Пока остановилась на варианте сss3+фильтры для IE.

PS Мне ехать, но по-возможности с шашечками)
...
Рейтинг: 0 / 0
09.01.2013, 13:32
| Ответить | Цитировать | Написать  
Кроссбраузерный "резиновый" параллелограм без картинок с помощью css.
    #38103304
Фотография Antonariy
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Antonariy
Участник
krvsason6kaТолько как насчет читать первый пост, а потом уже упражняться в остроумии?)
Встречный вопрос - как насчет приложить свой нтелект к тому, на что я дал ссылку? А забавно.
Из двух треугольников можно кроссбраузерно сложить параллелограмм. Вот только внутрь ничего не напишешь и рамочкой его не обведешь — он сам рамочка.
...
Рейтинг: 0 / 0
09.01.2013, 13:32
| Ответить | Цитировать | Написать  
Кроссбраузерный "резиновый" параллелограм без картинок с помощью css.
    #38103345
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
Antonariy , ты удивляешь меня... "Нутрь" всегда можно "сделать". Останется только "приставить" нужное слева и справа.
да и позиционирование еще никто не отменял!
...
Рейтинг: 0 / 0
09.01.2013, 13:54
| Ответить | Цитировать | Написать  
Кроссбраузерный "резиновый" параллелограм без картинок с помощью css.
    #38103406
Фотография Antonariy
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Antonariy
Участник
krvsa Antonariy , ты удивляешь меня... "Нутрь" всегда можно "сделать". Останется только "приставить" нужное слева и справа.До этого я догадался, и так можно сделать, если нужна фигура "залитая" цветом. А если в виде контура — облом.
...
Рейтинг: 0 / 0
09.01.2013, 14:20
| Ответить | Цитировать | Написать  
Кроссбраузерный "резиновый" параллелограм без картинок с помощью css.
    #38103524
son6ka
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
son6ka
Участник
Antonariy, да про треугольники я с самого начала писала!!! Посмотрите код в первом посте. Только вот есть проблемка, да. Вы о ней уже сказали.
...
Рейтинг: 0 / 0
09.01.2013, 14:58
| Ответить | Цитировать | Написать  
Кроссбраузерный "резиновый" параллелограм без картинок с помощью css.
    #38103528
son6ka
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
son6ka
Участник
Вот "приставить" правильно как-раз и не получается - не могу спозиционировать. Плюс ко всему поверх основного цвета в заливке будет еще и паттерн.
...
Рейтинг: 0 / 0
09.01.2013, 14:59
| Ответить | Цитировать | Написать  
Кроссбраузерный "резиновый" параллелограм без картинок с помощью css.
    #38103542
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
AntonariyА если в виде контура — облом.
Никто не мешает сделать две фигуры!
Одна большая - вторая маленькая, внутри большей... Т.о. можно сделать т.н. контур.
...
Рейтинг: 0 / 0
09.01.2013, 15:06
| Ответить | Цитировать | Написать  
Кроссбраузерный "резиновый" параллелограм без картинок с помощью css.
    #38103543
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
son6kaВот "приставить" правильно как-раз и не получается - не могу спозиционировать.
Пора показывать тестовые примеры...
...
Рейтинг: 0 / 0
09.01.2013, 15:06
| Ответить | Цитировать | Написать  
Кроссбраузерный "резиновый" параллелограм без картинок с помощью css.
    #38103550
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
son6kaПлюс ко всему поверх основного цвета в заливке будет еще и паттерн.
Ху изед "паттерн"?
авторПаттерн (информатика) — эффективный способ решения характерных задач проектирования, в частности проектирования компьютерных программ.
Паттерн (психология):
1) набор стереотипных поведенческих реакций или последовательностей действий;
2) объединение сенсорных стимулов как принадлежащих одному классу объектов.
Паттерн (технический анализ) — характерный участок временных графиков цен.
Паттерн (трекерная музыка) — таблица, определяющая порядок и режим воспроизведения семплов на нескольких каналах за некоторый промежуток времени.
Паттерн (электронная музыка) — набор заранее запрограммированных, последовательно (зациклено) звучащих разных партий инструментов.
Также патерн в схемах для вязания — схема узора, которая повторяется неоднократно в ряду.
http://ru.wikipedia.org/wiki/%CF%E0%F2%F2%E5%F0%ED

Что из перечисленного ты используешь?
...
Рейтинг: 0 / 0
09.01.2013, 15:09
| Ответить | Цитировать | Написать  
Кроссбраузерный "резиновый" параллелограм без картинок с помощью css.
    #38103588
son6ka
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
son6ka
Участник
krvsa,
Код: html
1.
2.
3.
4.
5.
<div class="wrap ">
	<div class="p">
		<span>bla-bla</span>
	</div>	
</div>


Код: css
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
.wrap{
  position: relative;
  width: 50px;
}
.pl{
  width: 30px;
  height: 20px;
   background: red;
 }

.p:before{
    content: '';
    width:0px;
    height: 0px;
    top: 0;
    left: 0;
    
   border-bottom: 20px solid red; 
    border-left: 20px solid transparent;

}
.p:after{
    content: '';
    width:0px;
    height: 0px;
    position: absolute;
    top: 0;
    right: 0;
    border-top: 20px solid red; 
    border-right: 20px solid transparent;  
}



Ну да, конечно, ок), паттерн - текстура фона.
...
Рейтинг: 0 / 0
09.01.2013, 15:30
| Ответить | Цитировать | Написать  
Кроссбраузерный "резиновый" параллелограм без картинок с помощью css.
    #38103598
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
son6kaпаттерн - текстура фона.
Зачем придумывать новые определения словам?
...
Рейтинг: 0 / 0
09.01.2013, 15:36
| Ответить | Цитировать | Написать  
Кроссбраузерный "резиновый" параллелограм без картинок с помощью css.
    #38103615
son6ka
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
son6ka
Участник
krvsa, в photoshop это называется паттерн - привычка.
...
Рейтинг: 0 / 0
09.01.2013, 15:43
| Ответить | Цитировать | Написать  
Кроссбраузерный "резиновый" параллелограм без картинок с помощью css.
    #38103629
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
son6ka , я вот про такое например писал...

Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
<!DOCTYPE html>
<html>
<head>
<!--
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
* {
	margin: 0;
	padding: 0;
}
.container {
	float: left;
	overflow: hidden;
}
.triangle-bottomright {
	float: left;
    width: 0;
    height: 0;
    border-bottom: 50px solid red; 
    border-left: 50px solid transparent;
}
.triangle-topleft {
	float: right;
    width: 0;
    height: 0;
    border-top: 50px solid red; 
    border-right: 50px solid transparent;			
}
.text {
    height: 50px;
	margin-left: 50px;
	margin-right: 50px;
	background-color: red;
}
.text p {
	padding-top: 10px;
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div class='container'>
	<div class='triangle-topleft'></div>	
	<div class='triangle-bottomright'></div>	
	<div class='text'>
		<p>test</p>
	</div>	
</div>
</body>
</html>
...
Рейтинг: 0 / 0
09.01.2013, 15:51
| Ответить | Цитировать | Написать  
Кроссбраузерный "резиновый" параллелограм без картинок с помощью css.
    #38103636
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
Или так...

Код: css
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
* {
	margin: 0;
	padding: 0;
}
.container {
	float: left;
	height: 50px;
	overflow: hidden;
}
.triangle-bottomright {
	float: left;
	width: 0;
	height: 0;
	border-bottom: 50px solid red; 
	border-left: 50px solid transparent;
}
.triangle-topleft {
	float: right;
	width: 0;
	height: 0;
	border-top: 50px solid red; 
	border-right: 50px solid transparent;			
}
.text {
	height: 100%;
	margin-left: 50px;
	margin-right: 50px;
	background-color: red;
}
.text p {
	padding-top: 10px;
}


Так вроде симпатичнее...
...
Рейтинг: 0 / 0
09.01.2013, 15:54
| Ответить | Цитировать | Написать  
Кроссбраузерный "резиновый" параллелограм без картинок с помощью css.
    #38103645
son6ka
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
son6ka
Участник
krvsa, аааааааа....с дивами и у меня получалось. А через псевдоклассы никак?
...
Рейтинг: 0 / 0
09.01.2013, 15:59
| Ответить | Цитировать | Написать  
Кроссбраузерный "резиновый" параллелограм без картинок с помощью css.
    #38103648
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
А вот "обратный" вариант, с текстурным параллелограммом...

Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
<!DOCTYPE html>
<html>
<head>
<!--
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
* {
	margin: 0;
	padding: 0;
}
body {
	background-color: #ffffff;
}
.container {
	float: left;
	height: 50px;
	overflow: hidden;
	background: url("http://cdn.sql.ru/css/images/top-menu-item.gif") 0px 0px repeat-x #3C538F;
}
.triangle-bottomright {
	float: right;
	width: 0;
	height: 0;
	border-bottom: 50px solid #ffffff; 
	border-left: 50px solid transparent;
}
.triangle-topleft {
	float: left;
	width: 0;
	height: 0;
	border-top: 50px solid #ffffff; 
	border-right: 50px solid transparent;			
}
.text {
	height: 100%;
	margin-left: 50px;
	margin-right: 50px;
	color: #ffffff;
}
.text p {
	padding-top: 10px;
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div class='container'>
	<div class='triangle-bottomright'></div>	
	<div class='triangle-topleft'></div>	
	<div class='text'>
		<p>test</p>
	</div>	
</div>
</body>
</html>



Т.е. всяких особенностей конечно будет валом! Но идеи таки проиллюстрированы.
...
Рейтинг: 0 / 0
09.01.2013, 16:01
| Ответить | Цитировать | Написать  
Кроссбраузерный "резиновый" параллелограм без картинок с помощью css.
    #38103650
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
son6kaА через псевдоклассы никак?
Если есть желание помучаться - таки никто не запрещает!
На данный момент довольно много вариантов в ЦСС т.ч. - твори, выдумывай, пробуй!!!
...
Рейтинг: 0 / 0
09.01.2013, 16:03
| Ответить | Цитировать | Написать  
Кроссбраузерный "резиновый" параллелограм без картинок с помощью css.
    #38103655
son6ka
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
son6ka
Участник
krvsa, ок, спасибо.
...
Рейтинг: 0 / 0
09.01.2013, 16:05
| Ответить | Цитировать | Написать  
Кроссбраузерный "резиновый" параллелограм без картинок с помощью css.
    #38103666
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
son6kaА через псевдоклассы никак?
Вот так например...

Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
<!DOCTYPE html>
<html>
<head>
<!--
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
body {
	background-color: #ffffff;
}
* {
	margin: 0;
	padding: 0;
}
.container {
	position: relative;
	float: left;
	height: 50px;
	overflow: hidden;
}
.container > div::before {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	content: '';
	width: 0;
	height: 0;
	border-bottom: 50px solid red; 
	border-left: 50px solid transparent;
}
.container > div::after {
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	content: '';
	width: 0;
	height: 0;
	border-top: 50px solid red; 
	border-right: 50px solid transparent;			
}
.container > div {
	height: 100%;
	margin-left: 50px;
	margin-right: 50px;
	background-color: red;
}
.container > div p {
	padding-top: 10px;
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div class='container'>
	<div class='text'>
		<p>test</p>
	</div>	
</div>
</body>
</html>
...
Рейтинг: 0 / 0
09.01.2013, 16:11
| Ответить | Цитировать | Написать  
Кроссбраузерный "резиновый" параллелограм без картинок с помощью css.
    #38103671
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
С текстурным параллелограммом все по аналогии...
...
Рейтинг: 0 / 0
09.01.2013, 16:13
| Ответить | Цитировать | Написать  
Кроссбраузерный "резиновый" параллелограм без картинок с помощью css.
    #38103675
son6ka
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
son6ka
Участник
krvsa, спасибо большое.
...
Рейтинг: 0 / 0
09.01.2013, 16:14
| Ответить | Цитировать | Написать  
Кроссбраузерный "резиновый" параллелограм без картинок с помощью css.
    #38103943
son6ka
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
son6ka
Участник
Что-то голова вообще не соображает: а можно ли повесить все это хозяйство на :hover без js?
...
Рейтинг: 0 / 0
09.01.2013, 18:38
| Ответить | Цитировать | Написать  
Кроссбраузерный "резиновый" параллелограм без картинок с помощью css.
    #38103944
son6ka
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
son6ka
Участник
Т.е. параллелограм - по наведению на, скажем, ссылку в диве или на сам див.
...
Рейтинг: 0 / 0
09.01.2013, 18:39
| Ответить | Цитировать | Написать  
Кроссбраузерный "резиновый" параллелограм без картинок с помощью css.
    #38103959
IDVsbruck
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
IDVsbruck
Участник
Самое классное решение - использовать только частный случай, когда у параллелограмма углы по 90°. А еще лучше, когда еще и все стороны равны ... ))))
...
Рейтинг: 0 / 0
09.01.2013, 18:47
| Ответить | Цитировать | Написать  
Кроссбраузерный "резиновый" параллелограм без картинок с помощью css.
    #38104080
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
son6kaа можно ли повесить все это хозяйство на :hover без js?
Картинку бы этого посмотреть... Я например не понял что именно ты хочешь сделать.
...
Рейтинг: 0 / 0
09.01.2013, 20:44
| Ответить | Цитировать | Написать  
Кроссбраузерный "резиновый" параллелограм без картинок с помощью css.
    #38104147
IDVsbruck
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
IDVsbruck
Участник
son6ka,

оф кос! Просто переопределяешь стили для вложенных элементов: вместо .container, .container > div::before, .container > div::after, .container > div, .container > div p прописываешь .container:hover, .container:hover > div::before, .container:hover > div::after, .container:hover > div, .container:hover > div p , где меняешь наполнение.
...
Рейтинг: 0 / 0
09.01.2013, 21:47
| Ответить | Цитировать | Написать  
32 сообщений из 32, показаны все 2 страниц
  все  
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Кроссбраузерный "резиновый" параллелограм без картинок с помощью css.
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение   Полит. конфиден.  
NoSQL.ru       Кролег: Проекты, Новости, Чат       РЕД ФОРУМ       Фотоальбом: Участники, Встречи
Закрыть
start [/forum/topic.php?all=1&fid=22&tid=1448878]:
 0ms
get settings:
 10ms
get forum list:
 16ms
check forum access:
 3ms
check topic access:
 3ms
track hit:
 161ms
get topic data:
 11ms
get forum data:
 3ms
get page messages:
 72ms
get tp. blocked users:
 1ms
others: 241ms
total:  521ms
созд. / загр.: 521ms
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]