如何制作前后元素的倾斜结尾？

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-multiple-backgrounds/和https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds

您可以将多个背景应用于元素。它们彼此叠加，您在顶部提供的第一个背景和在背面列出的最后一个背景。只有最后一个背景可以包含背景颜色。

qazxsw poi在这里也很有用qazxsw poi

background-size CSS属性设置元素背景图像的大小。图像可以保持其自然尺寸，拉伸或约束以适应可用空间。

https://developer.mozilla.org/en-US/docs/Web/CSS/background-size也很方便background-size

background-clip CSS属性设置元素的背景或在其边框下方延伸。

玩弄背景 - ^属性，你可以做这样的事情

background-clip

https://developer.mozilla.org/en-US/docs/Web/CSS/background-clip

Answer 2

这是我的想法使用多个背景和

.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>

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>