Почему моя верхняя граница для диапазона меньше нижней?

Я хочу иметь три треугольника в строке, где первый и третий направлены вверх, а средний - вниз. Теперь, первый и третий (нижние треугольники) в порядке, у меня проблемы со средним.Почему моя верхняя граница для диапазона меньше нижней?

Почему размер верхнего треугольника настолько мал?

Как еще я могу иметь такое соглашение иначе?

.lower { 
 
    border-width: 50px; 
 
    border-color: black red green blue; 
 
    border-style: solid; 
 
} 
 

 
.upper { 
 
    border-width: 50px 50px 0 50px; 
 
    border-color: black transparent transparent transparent; 
 
    border-style: solid; 
 
    height: 50px; 
 
}

<div class="triangles"> 
 
    <span class="lower"></span> 
 
    <span class="upper"></span> 
 
    <span class="lower"></span> 
 
</div>

источник

2017-02-16 jsgirl

Как мы все знаем, пядь встроенный элемент, так что вы должны сделать его встроенный блок элемент, чтобы захватить фактическое пространство для пролета. Просто добавьте

span { 
display: inline-block; 
}

в CSS. Проблема ширины границы будет зафиксирована (Y).

источник

2017-02-16 09:24:40

Что вы имеете в виду "захватить реальное пространство? Кроме того, просьба указать ссылки. – jsgirl

На самом деле это основы HTML и CSS. Когда мы начинаем склоняться над HTML, мы должны помнить теги и там типа (inline или block). Встроенный элемент всегда занимает пространство в соответствии с заданной высотой строки. Поэтому, если вы хотите правильно применять маркер и дополнение к встроенному элементу, вы делаете их встроенными блоками или блоками. https://www.w3schools.com/css/css_inline-block.asp –

Hii @jsgirl см. Это https://codepen.io/amitdmx/pen/mRgEew –

Это часть ответа; альтернативный способ сделать это. Я до сих пор не знаю, почему и как это происходит.

.lower, 
 
.upper { 
 
    border-style: solid; 
 
    display: inline-block; 
 
} 
 

 
.lower { 
 
    border-width: 0 50px 50px 50px; 
 
    border-color: transparent transparent black transparent; 
 
} 
 

 
.upper { 
 
    border-width: 50px 50px 0 50px; 
 
    border-color: black transparent transparent transparent; 
 
}

<div class="triangles"> 
 
    <span class="lower"></span> 
 
    <span class="upper"></span> 
 
    <span class="lower"></span> 
 
</div>

источник

2017-02-16 09:25:40 jsgirl

Я считаю, что это из-за 0 в

border-width: 50px 50px 0 50px;

источник

2017-02-16 09:27:40

.lower { 
     border-width: 50px; 
     border-color: black red green blue; 
     border-style: solid; 
    } 

    .upper { 
     border-width: 50px 50px 0 50px; 
     border-color: black transparent transparent transparent; 
     border-style: solid; 
     height: 50px; 
    } 
    .disp { 
     display: inline-flex; 
    } 
    <div class="triangles disp"> 
     <span class="lower"></span> 
     <span class="upper"></span> 
     <span class="lower"></span> 
    </div>

источник

2017-02-17 10:07:28 Parth

Почему моя верхняя граница для диапазона меньше нижней?

ответ

Смежные вопросы