Как сделать плоскую не solid границу, используя css?

Question

Я хочу сделать плоскую рамку, подобную этой,

Не должно быть так:

.demo{
  height: 60px;
  width: 90%;
  margin: 2rem auto;
  border-width: 5px;
  border-style: solid;
  border-color: #007bff #ddd;
}

<div class="demo"></div>

Я думаю, что это было сделано CSS до / после. Но помните, что это на самом деле не сделано с помощью пограничного свойства. Мне нужны такие же вещи, как эта фотография. Понятия не имею, как это сделать. [Q1] Нужно ли много пролета или после ширины? (Пожалуйста, дайте простой дизайн)

[Q2] Как WordPress создает заголовок своей статьи? они используются до / после или много раз вяза? (Я уже проверяю редактор WordPress, но ничего не нашел)

Answer 1

.demo {
  height: 60px;
  width: 90%;
  margin: 2rem auto;
  position: relative;
  border-left: 4px solid #000;
  box-sizing: border-box;
}

.demo::after {
  top: 0;
  left: 0;
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  box-sizing: border-box;
  border: 1px solid #ddd;
  border-left: none;
}

<div class="demo"></div>

Answer 2

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

.demo{
  height: 60px;
  width: 90%;
  margin: 2rem auto;
  border: 5px solid transparent;
  background:
    linear-gradient(#007bff,#007bff) left   /5px 100%, /* The top layer */
    linear-gradient(red,red)         right  /5px 100%,
    linear-gradient(#ddd,#ddd)       bottom /100% 2px,
    linear-gradient(blue,blue)       top    /100% 2px; /* The bottom layer */
  background-repeat:no-repeat;
}

<div class="demo"></div>

Answer 3

попробуйте это: - display: table;

.demo {
    display: table;
    border-collapse: collapse;
    width: 90%;
    margin: 2em auto;
}
.cell {
    display: table-cell;
    border: 1px solid #b6bdc2;
    width: 90%;
    height: 60px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border-left-width: 4px;
    border-left-color: #5d646c;
}


<div class="demo">
  <div class="cell"></div>
</div>

Может быть, это поможет

Answer 4

Попробуйте, это небольшой взлом со свойством :before:

.demo{
    border-left: solid 5px black;
    width: 90%;
    height: 50px;
    position:relative;
}
.demo:before{
    content:"";
    top: 0;
    left: 0;
    position:absolute;
    border: 1px solid lightgray;
    border-left:none;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}

Или еще одним способом, которого вы можете достичь следующим образом:

HTML

<div class="card">
  <div class="left-pad"></div>
  <div class="demo"></div>
</div>

CSS

.card {
  display: flex;
  align-items: center;
}
.left-pad {
  width: 5px;
  height: 50px;
  background: black;
  border-top: 1px solid black;
  border-bottom: 1px solid black;
}
.demo{
    border: solid 1px gray;
    border-left: 0px;
    width: 200px;
    height: 50px;
}

Может быть, это поможет