Форум

seregarem · #1 (**permalink**) 28.08.2010, 19:33

Можно ли как-то задать форму фона, т.е., например, чтобы фон был в виде параллелограмма?

exec · #2 (**permalink**) 28.08.2010, 20:35

background-image

seregarem · #3 (**permalink**) 28.08.2010, 20:37

не катит, с помощью картинки не подходит.можно ли через css?

exec · #4 (**permalink**) 28.08.2010, 20:39

Может и можно через CSS3, но некроссбраузерно.

seregarem · #5 (**permalink**) 29.08.2010, 10:46

А как это сделать в CSS3?

Sweet · #6 (**permalink**) 29.08.2010, 13:21

Например так

subzey · #7 (**permalink**) 30.08.2010, 09:11

Или через css3 transform, но в этом случае придется повозиться с вложением в ссылку спана.

ksa · #8 (**permalink**) 30.08.2010, 11:10

seregarem, нарисовал бы чего хочешь получить... И почему такие ограничения на картинки?

subzey · #9 (**permalink**) 30.08.2010, 13:11

<style type="text/css">
.a-par, .a-par-inner {position: relative}
.a-par:before {
	content:" ";
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	background: red;
	transform: skew(30deg);
	-o-transform: skew(30deg);
	-webkit-transform: skew(30deg);
	-moz-transform: skew(30deg);
}

</style>
<a class="a-par" href="#"><span class="a-par-inner">Hardest porn in the Web!</span></a>

Как-то так. Надо ли говорить, что в IE работать не будет?

ksa · #10 (**permalink**) 30.08.2010, 13:59

Могу предложить даже кроссбраузерный вариант...

<html>
<head>
<style>
body {
	background-color: #ffffff;
}
#left,
#right {
	width: 100px;
	height: 100px;
	float: left;
	/*overflow: hidden;*/
}
#center {
	height: 100px;
	float: left;
	background-color: silver;
}
#b_left {
	border-top: 100px solid silver;
	border-left: 100px solid #ffffff;
}
#b_right {
	border-bottom: 100px solid silver;
	border-right: 100px solid #ffffff;
}
</style>
</head>
<body>
<div id='left'>
	<div id='b_left'></div>
</div>
<div id='center'>center</div>
<div id='right'>
	<div id='b_right'></div>
</div>
</body>			
</html>

Форум

Справочник

Discord чат

Курсы javascript