Div треугольником

#css #javascript

Можно ли как-то сделать div с фиксированной высотой и шириной не прямоугольником/квадратом,
а к треугольником. Чтобы незаполненная область div попросту удалялась. Нужно для кореектного
отображения того что находится под div, потому как контент должен уезжать под шапку,
но кусочек этой шапки своей неиспользуемой частью div перекрывает то, что под него
уезжает и ессно из-за z-index туда даже не кликнуть    

Ответы

Ответ 1

Треугольником сделать нельзя. Можно сделать треугольный бордер, если это устроит.
css3 shapes
#up-triangle {
   width: 0; 
   height: 0; 
   border-bottom: 120px solid green; 
   border-left: 60px solid transparent; 
   border-right: 60px solid transparent; 
}

UPD:
Добавьте поверх них прозрачные квадратные картинки с imageMap и будет вам счастье:
активная зона любой формы и уезжание под шапку.


Ответ 2

Вместо div'а используй inline svg - там можно получить любую форму.

Ещё вариант - использовать clip по маске или clip-path. Для IE не получится.


Ответ 3

Пример с сайта CSS-Tricks 



.arrow-up {
	width: 0; 
	height: 0; 
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	
	border-bottom: 5px solid black;
}

.arrow-down {
	width: 0; 
	height: 0; 
	border-left: 20px solid transparent;
	border-right: 20px solid transparent;
	
	border-top: 20px solid #f00;
}

.arrow-right {
	width: 0; 
	height: 0; 
	border-top: 60px solid transparent;
	border-bottom: 60px solid transparent;
	
	border-left: 60px solid green;
}

.arrow-left {
	width: 0; 
	height: 0; 
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent; 
	
	border-right:10px solid blue; 
}








(Лицензия, если что.)