如何使元素前后的斜尾？

Question

您可以在下面看到一张图片（我真的不太擅长绘画，对此感到抱歉）。我不知道如何仅在两个角上制作这些（我猜）框阴影（图中为粉红色），但是它们的末端是倾斜的。因为我认为，可以使用after和before元素制作角上的边框（图片中的红色）。 我要做的是制作两个盒子，一个在另一个盒子里，然后添加一个盒子阴影。但是，我到那时止于如何使那些倾斜的末端以及如何使这些阴影比整个高度或长度短。也许您有什么想法？

这是我到目前为止尝试过的：

.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

这是我使用多个背景和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>

Answer 2

关于渐变，请参见：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

  

您可以将多个背景应用于元素。这些背景相互叠放，您提供的第一个背景位于顶部，背面提供了最后一个背景。只有最后一个背景可以包含背景颜色。

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属性设置元素的背景还是在其边框下方延伸。

玩转background- ^ properties，您可以执行以下操作

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