Как убрать зазоры между блоками div?

463

07 января 2017, 14:40

Приветствую. Хотел сделать блок в виде стрелочки. Получилось следующее:

.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е (на компе) зазоров нет, а с мобильных устройств - есть. Помогите, пожалуйста, убрать зазоры.

Answer 1

Как один из вариантов, можно задать второму блоку отрицательный внешний отступ в 1 px :

.arrow1 { 
     
    width               : 200px; 
    height              : 40px; 
    background-color    : #0000FF; 
    -webkit-transform   : skew(-20deg); 
     
} 
  
.arrow2 { 
     
    width               : 200px; 
    height              : 40px; 
    background-color    : #0000FF; 
    -webkit-transform   : skew(20deg); 
    margin-top: -1px; 
     
}

<HTML> 
  
    <HEAD> 
     
        <link rel = "stylesheet" href = "index.css" type = "text/css"> 
     
    </HEAD> 
  
    <BODY> 
         
        <div class = "arrow1"></div> 
        <div class = "arrow2"></div> 
     
    </BODY> 
  
</HTML>