Форма фона ссылки
Можно ли как-то задать форму фона, т.е., например, чтобы фон был в виде параллелограмма?
|
background-image
|
не катит, с помощью картинки не подходит.можно ли через css?
|
Может и можно через CSS3, но некроссбраузерно.
|
А как это сделать в CSS3?
|
Например так
|
Или через css3
transform, но в этом случае придется повозиться с вложением в ссылку спана. |
seregarem, нарисовал бы чего хочешь получить... И почему такие ограничения на картинки?
|
<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 работать не будет? |
Могу предложить даже кроссбраузерный вариант...
<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>
|
| Часовой пояс GMT +3, время: 12:25. |