0

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

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

2
  • 1
    поставьте второй margin-top: -1px;
    – SVE
    Commented 6 янв. 2017 в 8:40
  • @Elena А можете оформить это как ответ? Commented 6 янв. 2017 в 9:51

1 ответ 1

0

Как один из вариантов, можно задать второму блоку отрицательный внешний отступ в 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>

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.