Сделать двойную рамку со сдвигом?

#html #css

Вот макет:



Подскажите хотя-бы, что нужно использовать (в идеале пример конечно же). Заранее
благодарю.
    

Ответы

Ответ 1

p {
  position: relative;
  border: 1px solid;
  padding: 1em .5em .5em 1em;
  margin: .5em 1em 1em .5em;
  float: left;
}

p:before {
  content: "";
  position: absolute;
  left: .5em;
  top: .5em;
  width: 100%;
  height: 100%;
  z-index: -1;
  border: inherit;
  box-sizing: content-box;
}
Сделать двойную рамку со сдвигом?


Ответ 2

.dd {
    padding: 10px;
    border: 2px solid blue;
    width: 400px;
    height: 80px;
    overflow: hidden;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.bb {
    margin-top: 10px;
    margin-left: 10px;
    position: relative;
}
.dd:after {
    border: 2px solid #FF5722;
    width: 400px;
    height: 80px;
    box-sizing: border-box;
    position: absolute;
    top: -10px;
    left: -10px;
    content: '';
}

Текст