Помогите сделать ссылку в виде "стрелочки"

[bob_24]

Нужно сделать как на картинке:

Делаю так:

<a href="#" class="item">Пункт 1</a>

.item{
	display: block;
	position: relative;
	height:30px;
	width:130px;
	line-height:30px;
	text-align:center;
	text-transform:uppercase;
	color:#fff;
	background-color: #f00;
		}
	.item:before{
		content:'';
		position: absolute;
		left:0;
		top:0;
		border-left:15px solid #fff;
		border-top:15px solid transparent;
		border-bottom:15px solid transparent;
		}
	.item:after{
		content:'';
		position: absolute;
		left:100%;
		top:0;
		border-left:15px solid #f00;
		border-top:15px solid transparent;
		border-bottom:15px solid transparent;
		}
	.item:hover{
		background-color: orange;
		}

Ссылка получается, но:

как видно кликабельна и область псевдо-элементов (где он прямоугольник образует), хотелось бы, что бы кликабельна была только красная область, возможно такое сделать?

И скажите, как избавится от этой странной окантовки справа от треугольника...

Edited February 6, 2012 by bob_24

[ablay2009]

1) Как сделать кликабельным только треугольник я не знаю.

2) Чтобы псевдо элемент менял фон, надо добавить

.item:hover .item:after{
background-color: orange;
}

Этакая JS-like запись

3) Что за окантовка?

[bob_24]

С фоном я разобрался, он меняется не так.

Окантовка или как это правильно называется:

[K313]

MAP

[ablay2009]

С фоном я разобрался, он меняется не так.

Окантовка или как это правильно называется:

Уберите border-left у .item:after

P.S. Называется это - граница или border

Edited February 6, 2012 by ablay2009

[bob_24]

ablay2009, спасибо за внимание, но вы пишите, мягко говоря, не правильные вещи.

K313, что-то кроме map можете посоветовать? map, как я понял, только к картинкам цепляется?

Edited February 6, 2012 by bob_24

[K313]

если нужно больше гемороя:

1. наделать дивов с skew и покрывать ими ненужные части тега а

2. попробовать использовать 2 дива с skew (один сверху один снизу тег а для каждого свой) сам не пробовал

3. использовать SVG, VML, Canvas, Flash, ActionScript, ............

[ablay2009]

Ну извините тогда, я в использовании :before и :after не профессионал (и даже не любитель)

[rediskavet]

на такой разметке наверно ни как не сделать, блоки ведь все равно остаются квадратными.

может с дополнительными блоками которым применить свойство transform, ими перекрыть некликабельные области, а общим контейнером обрезать лишнее.

Но это получается 4 доп. элементов на каждую ссылку.

[hedgehog]

А стоит ли такой огород городить? не проще ли сделать бекграунд картинкой?

Edited February 7, 2012 by hedgehog

[bob_24]

Псевдо-элементы лучше картинок. Это очевидно. Но пришлось выбрать вариант с картинкой и map. Всем спасибо.