Есть ли способ построить тройную границу, средняя и внутренняя границы которой охватывают только два из четырех углов? - PullRequest
Новая
       13

Есть ли способ построить тройную границу, средняя и внутренняя границы которой охватывают только два из четырех углов?

0 голосов
/ 24 января 2019

Я хочу создать следующую границу.

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

Я пытался применить это к одной границе с послеи до ccs, и это позволяет мне легко создавать до трех строк, но я не могу стилизовать внутреннюю и среднюю, как мне хочется.

Текущее состояние кода: 

.corner-adored-white-border {
    position: relative;
    border: 1px solid white;
    padding: 10px;
    border-radius: 9px;
    margin: 10px;
}

.corner-adored-white-border:before {
    content: "";
    position: absolute;
    top: 2px;
    bottom: 2px;
    left: 2px;
    right: 2px;
    border: 1px solid white;
    border-radius: 8px;
}

.corner-adored-white-border:after {
    content: "";
    position: absolute;
    top: 5px;
    bottom: 5px;
    left: 5px;
    right: 5px;
    border: 1px solid white;
    border-radius: 8px;
}

Как видитетекущий результат не дает мне точную границу, которую я хочу, на внутренних и средних линиях.

1 Ответ

0 голосов
/ 25 января 2019

Вот идея с псевдоэлементом и тенью блока 

.box {
  width:250px;
  height:100px;
  border:2px solid;
  border-radius:10px;
  position:relative;
  z-index:0;
}
.box:before,
.box:after{
  content:"";
  position:absolute;
  z-index:-1;
  width:30px;
  height:30px;
  border:2px solid;
}
.box:before {
 top:5px;
 left:5px;
 border-right:0;
 border-bottom:0;
 border-top-left-radius:10px;
 box-shadow: 
  5px 5px 0 inset #fff, 
  7px 7px 0 inset #000;
}
.box:after {
 bottom:5px;
 right:5px;
 border-left:0;
 border-top:0;
 border-bottom-right-radius:10px;
 box-shadow: 
  -5px -5px 0 inset #fff, 
  -7px -7px 0 inset #000;
}
<div class="box">

</div>
...