Добавить смещение к границе дна в CSS

Question

У меня есть проблема, когда мне нужно сделать рамку-дно, с заданным смещением в CSS

Например, в этом JSFiddle у меня черная граница-низ.

https://jsfiddle.net/uexma4o6/343/

<div style="border-bottom: 2px solid black; width:500px; height:40px; background-color:lightcoral"></div>

но я хочу задать смещение этой сплошной черной границы в 2px, чтобы оно было на 5px выше того места, где оно находится.

Возможно ли это?

Answer 1

Решение

https://jsfiddle.net/StephanieSchellin/j7pmxkc3/

Используйте CSS ::after, чтобы добавить псевдоэлемент с рамкой, которую вы ищете.Затем переместите псевдоэлемент, чтобы расположить его так, как вам нравится.Этот псевдоэлемент всегда будет привязан к его корневому элементу, но вам все равно придется учитывать его изменение для @media изменений запроса и т. Д.

На рисунке ниже вы видите, что это решение наслаивает псевдоэлементнад корнем.Вы можете использовать :: before или поэкспериментировать с другими настройками позиционирования для соответствия вашим требованиям макета.

Всегда проводите множество кросс-браузерных тестов, когда выполняете подобные вещи, потому что возможно, вы столкнетесь с проблемами блочной модели.

HTML

<div class='the-div'></div>

CSS

.the-div {
  width:500px;
  height:40px;
  background-color:lightcoral;
  position: relative
}
.the-div::after {
  border-bottom: 2px solid black;
  content: '';
  width:500px;
  position:absolute;
  bottom:5px;
}

Дополнительная литература

См. https://css -tricks.com / pseudo-element-roundup / Есть много интересных вещей, которые вы можете сделать с псевдоэлементами.

Answer 2

Это можно сделать с помощью линейного градиента:

.box {
  background:
    linear-gradient(black,black) 0 calc(100% - 5px)/100% 2px no-repeat,
    lightcoral;
  width: 500px;
  height: 40px;
}

<div class="box"></div>

Вы также можете сделать это так:

.box {
  background:
    linear-gradient(black,black) bottom/100% 2px no-repeat,
    lightcoral;
  border-bottom:5px solid lightcoral;
  width: 500px;
  height: 40px;
  box-sizing:border-box;
}

<div class="box"></div>

Еще одна идея с тенью от коробки:

.box {
  background:lightcoral;
  border-bottom:2px solid black;
  box-shadow:0 5px 0 lightcoral;
  width: 500px;
  height: 40px;
}

<div class="box"></div>

И со вставленной тенью:

.box {
  background:lightcoral;
  box-shadow:
    0 -5px 0 lightcoral inset,
    0 -7px 0 black inset;
  width: 500px;
  height: 40px;
}

<div class="box"></div>