Две разные границы ширины с 3 сторон

Question

У меня был этот код для создания двойной границы с различной шириной, но мне нужно, чтобы он отображался только слева, сверху и справа.Это нормально со свойством border, но невозможно с контуром, так как оно не разделяет ту же границу слева и т. Д.

border: double 4px black;
outline: solid 3px black;

любая помощь будет отличной

Answer 1

Вы можете использовать box-shadow вместо outline - см. Демонстрацию ниже:

div {
  line-height: 20px;
  border-color: black;
  border-style: double;
  border-width: 4px 4px 0 4px;
  box-shadow: -3px 0 0 0 black,  /* left */
              3px 0 0 0 black,  /* right */
              3px -3px 0 0 black, /* top */
              -3px -3px 0 0 black; /* top */
}

<div>&nbsp;</div>

Answer 2

Почему бы не удалить контур и вместо него создать вложенный элемент внутри элемента?

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

Создание вложенных элементов в HTML:

<div class="big">
        <div class="small">Some text Here.....</div>
</div>

Затем примените CSS:

.big{
      border: 5px solid green;
      border-bottom: none;
    }
.small{
        border: 2px solid black;
        border-bottom: none;
        margin: 2px;
    }

Нет необходимости использовать схему.

Answer 3

.st1, .st2 {
    background-color: yellow;
}
.st1 {
    outline: solid 3px black;
    width: 400px;
    height: 200px;
    position: relative;
}
.st2 {
border-left-color: black;
border-left-style: double;
border-left-width: 4px;
border-top-color: black;
border-top-style: double;
border-top-width: 4px;
border-right-color: black;
border-right-style: double;
border-right-width: 4px;
position: absolute;
left: -1px;
right: -1px;
top: -1px;
bottom: -3px;
}

<div class="st1"><div class="st2"></div></div>

или

.st1, .st2 {
    background-color: yellow;
}
.st1 {
    border: 3px solid black;
    border-bottom: none;
    width: 400px;
    height: 200px;
    position: relative;
    box-sizing: border-box;
}
.st2 {
    border: 1px solid black;
    border-bottom: none;
    margin-top: 2px;
    margin-right: 2px;
    margin-left: 2px;
    margin-bottom: 0px;
    position: absolute;
    bottom: 0;
    top: 0;
    left: 0;
    right: 0;
}

<div class="st1"><div class="st2">test</div></div>

Answer 4

Вот идея использования градиента для создания второй границы.

.box {
  width: 200px;
  height: 200px;
  border: solid 2px red;
  border-bottom:none;
  padding:3px; /*control the distance between border*/
  padding-bottom:0;
  background:
    linear-gradient(green,green) top  /100% 4px,
    linear-gradient(green,green) left /4px  100%,
    linear-gradient(green,green) right/4px  100%;
  background-repeat:no-repeat;
  background-origin:content-box;
}

<div class="box">

</div>

Другая идея с использованием псевдоэлемента:

.box {
  width: 200px;
  height: 200px;
  border: solid 2px red;
  border-bottom:none;
  position:relative;
}
.box:before {
  content:"";
  position:absolute;
  top:3px;
  left:3px;
  right:3px;
  bottom:0;
  border: solid 4px green;
  border-bottom:none;
}

<div class="box">

</div>

Answer 5

Создание вложенных элементов со своими собственными идентификаторами

<div id="outer-border">
   <div id="inner-border"></div>
</div>

Затем установите правильные свойства CSS для этих элементов, например что-то вроде:

#outer-border{border-bottom: none}
#inner-border{border-bottom: none}