Рамки и треугольники, часть 2 [26]

Курсы §30. Рамки и фоны, часть 2
1

Почему не засчитывает толщину нижней стороны ?
(я понимаю что можно записать через width, но без него короче а результат тот же, должен быть…)

image
image.png1920×1080 491 KB

вот код;

[class^="arrow"] {
  display: inline-block;
  margin: 30px;
  width: 0;
  height: 0;
}

.arrow-bottom {
  border: 100px solid #ffffff;
  border-color: #0074d9 transparent;
  border-bottom: 0px;
}

.arrow-left {
  border: 100px solid #ffffff;
  border-color: transparent #0074d9 ;
  border-left: 0px;
}
2

При использовании короткой записи свойств нужно помнить, что оно будет переопределять не только то значение, который вы прописали, но и также те, которые задаются по умолчанию.

В вашем коде запись border-bottom: 0px поменяла значение свойства border-color на изначальное значение — initial, поэтому и стоит менять конкретное свойство с помощью border-bottom-width.

1 лайк
3

А вот где собака зарыта, спасибо

1 лайк