Приветствую. Хотел сделать блок в виде стрелочки. Получилось следующее:
.arrow1 {
width : 200px;
height : 40px;
background-color : #0000FF;
-webkit-transform : skew(-20deg);
}
.arrow2 {
width : 200px;
height : 40px;
background-color : #0000FF;
-webkit-transform : skew(20deg);
}
<HTML>
<HEAD>
<link rel = "stylesheet" href = "index.css" type = "text/css">
</HEAD>
<BODY>
<div class = "arrow1"></div>
<div class = "arrow2"></div>
</BODY>
</HTML>
В браузере FireFox 50.1.0 (последний на данный момент) при определенных масштабах появляются зазоры между двумя блоками. В Chromе (на компе) зазоров нет, а с мобильных устройств - есть. Помогите, пожалуйста, убрать зазоры.
margin-top: -1px;