Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Кроссбраузерный "резиновый" параллелограм без картинок с помощью css. / 25 сообщений из 32, страница 1 из 2
  1  все
08.01.2013, 18:57
    #38102410
son6ka
son6ka
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Кроссбраузерный "резиновый" параллелограм без картинок с помощью css.
Здравствуйте.

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

Пробовала использовать :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, 23:47
    #38102685
iConst
iConst
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Кроссбраузерный "резиновый" параллелограм без картинок с помощью css.
son6ka,

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

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

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

Что из перечисленного ты используешь?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
09.01.2013, 15:30
    #38103588
son6ka
son6ka
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Кроссбраузерный "резиновый" параллелограм без картинок с помощью css.
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:36
    #38103598
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Кроссбраузерный "резиновый" параллелограм без картинок с помощью css.
son6kaпаттерн - текстура фона.
Зачем придумывать новые определения словам?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
09.01.2013, 15:43
    #38103615
son6ka
son6ka
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Кроссбраузерный "резиновый" параллелограм без картинок с помощью css.
krvsa, в photoshop это называется паттерн - привычка.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
09.01.2013, 15:51
    #38103629
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Кроссбраузерный "резиновый" параллелограм без картинок с помощью css.
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:54
    #38103636
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Кроссбраузерный "резиновый" параллелограм без картинок с помощью css.
Или так...

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

Код: 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:03
    #38103650
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Кроссбраузерный "резиновый" параллелограм без картинок с помощью css.
son6kaА через псевдоклассы никак?
Если есть желание помучаться - таки никто не запрещает!
На данный момент довольно много вариантов в ЦСС т.ч. - твори, выдумывай, пробуй!!!
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
09.01.2013, 16:05
    #38103655
son6ka
son6ka
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Кроссбраузерный "резиновый" параллелограм без картинок с помощью css.
krvsa, ок, спасибо.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
09.01.2013, 16:11
    #38103666
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Кроссбраузерный "резиновый" параллелограм без картинок с помощью css.
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
| Ответить | Цитировать | Написать  
  1  все
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Кроссбраузерный "резиновый" параллелограм без картинок с помощью css. / 25 сообщений из 32, страница 1 из 2
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение  
Полит. конфиден.  
созд. / загр.: 559ms
Закрыть
start [/forum/topic.php?fid=22&mobile=1&tid=1448878]:
 0ms
get settings:
 14ms
get forum list:
 19ms
check forum access:
 3ms
check topic access:
 3ms
track hit:
 180ms
get topic data:
 9ms
get forum data:
 2ms
get page messages:
 60ms
get tp. blocked users:
 2ms
others: 267ms
total:  559ms
x
x
Закрыть


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