Как сделать косые окончания элементов после и перед?

Question

вы можете увидеть картинку ниже (я действительно плохо рисую, извините за это).Я не знаю, как сделать эти (я полагаю) тени от ящиков (розовые на рисунке) только на двух углах, но их окончание косо.Потому что, как я думаю, эти границы (красные на рисунке) на углах могут быть сделаны с элементами после и до.Что я хотел бы сделать, это сделать две коробки, одну внутри другой, и добавить тень от коробки.Но на этом я остановлюсь, как сделать эти наклонные окончания и как сделать эти тени короче всей высоты или длины.Может быть, у вас есть какие-либо идеи?

Это то, что я пробовал до сих пор:

.div2 {
  position: relative;
  width: 40px;
  height: 40px;
  margin: 10px;
}

.div {
  position: relative;
  width: 60px;
  height: 50px;
  margin: 20px;
  box-shadow: 10px 10px;
}

.div2::before {
  display: block;
  content: "";
  width: 20px;
  height: 20px;
  position: absolute;
  top: -10px;
  left: -10px;
  border-top: 1px solid #000;
  border-left: 1px solid #000;
}

span::after {
  display: block;
  content: "";
  width: 20px;
  height: 20px;
  position: absolute;
  bottom: -10px;
  right: -10px;
  border-bottom: 1px solid #000;
  border-right: 1px solid #000;
}

<div class="div">
  <div class="div2"><span></span></div>
</div>

Answer 1

о градиенте см .: https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient

Функция linear-gradient() CSS создает изображение, состоящее из постепенного перехода между двумя или более цветами вдоль прямой линии. Его результатом является объект типа данных <gradient>, который является особым видом <image>.

о нескольких фонах https://css -tricks.com / css-basics-using-множественные фоны / & https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds

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

background-size здесь также полезно https://developer.mozilla.org/en-US/docs/Web/CSS/background-size

Свойство background-size CSS устанавливает размер фонового изображения элемента. Изображение можно оставить до его естественного размера, растянуть или ограничить, чтобы оно соответствовало доступному пространству.

background-clip тоже пригодится https://developer.mozilla.org/en-US/docs/Web/CSS/background-clip

Свойство background-clip CSS устанавливает, является ли фон элемента или выходит за его границы.

играя с фоновыми свойствами, вы можете сделать что-то вроде этого

.mybox {
  width:250px;
  height:180px;
  padding:20px;
  background:
    linear-gradient(0deg,rgb(237, 28, 36),rgb(237, 28, 36)),
    linear-gradient(0deg,rgb(237, 28, 36),rgb(237, 28, 36)),
    linear-gradient(0deg,rgb(237, 28, 36),rgb(237, 28, 36)),
    linear-gradient(0deg,rgb(237, 28, 36),rgb(237, 28, 36)),
    linear-gradient(0deg, rgb(0, 162, 232), rgb(0, 162, 232)),    
    linear-gradient(-45deg, rgb(255, 174, 201) 20%, rgb(0, 162, 232) 20%, rgb(0, 162, 232) 80%, rgb(255, 174, 201) 80%) ;
  background-clip: border-box, border-box,border-box, border-box, content-box,border-box;
  background-repeat:no-repeat;
  background-size:  3px 40px, 80px 3px, 3px 40px, 80px 3px,auto auto,auto auto;
  background-position: 22px 160px, 22px 200px , 260px 15px  , 180px 15px ,center,  center;
  
  display:flex;
  align-items:center;
  justify-content:center;
  color:white;
  font-size:3rem;
  box-shadow: 20px 20px  10px purple
}

<div class="mybox"> My Box</div>

Answer 2

Вот моя идея, используя несколько фонов и border-image

.box {
  width:150px;
  height:100px;
  border:15px solid transparent;
  border-image:linear-gradient(-45deg,pink 20%,transparent 20%,transparent 80%,pink 80%) 15;
  background:
    linear-gradient(red,red) top right,
    linear-gradient(red,red) top right, 
    linear-gradient(red,red) bottom left, 
    linear-gradient(red,red) bottom left,
    #00a2e8;
  background-size:2px 40px,40px 2px;
  background-origin:padding-box;
  background-repeat:no-repeat;
}

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

Вот еще одна идея, использующая меньший градиент:

.box {
  width:150px;
  height:100px;
  border:15px solid transparent;
  border-image:linear-gradient(-45deg,pink 20%,transparent 20%,transparent 80%,pink 80%) 15;
  background:#00a2e8;
  position:relative;
}
.box:before {
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  border:2px solid transparent;
  border-image:linear-gradient(30deg,red 20%,transparent 20%,transparent 80%,red 80%) 1;
}

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