如何将自定义边边框设置为图像并使其出现在其他图像上？

Question

我正在努力实现以下要求的输出。

下面是我完成的边框部分。现在如何重叠图像并设置边框如下图。

下面是我的代码。

<!DOCTYPE html>
<html>
<head>
    <style> 
        .img1 {

            border: 15px solid transparent;
            background: 
            linear-gradient(#faa633, #faa633) 
            top left/ /* position */
            50% 50% /* width height */
            border-box no-repeat;
            z-index: 1
        }

        .img2{
            border: 15px solid transparent;
            background: 
            linear-gradient(#faa633, #faa633) 
            top right/ /* position */
            50% 100% /* width height */
            border-box no-repeat;
            z-index: 2
        }
    </style>
</head>
<body>

    <img src="https://picsum.photos/id/10/200/150" class="img1">
    <img src="https://picsum.photos/id/10/200/150" class="img2" >


</body>
</html>

Answer 1

使用伪元素我们可以实现这一点。

.image-container {
  display: inline-block;
  margin-left: 100px; /* for testing purpose */
  position: relative; /* It must add to parent element */
}

.img1 {
  border: 15px solid transparent;
  background: linear-gradient(#faa633, #faa633) 
            top left/ /* position */
            50% 50% /* width height */
            border-box no-repeat;
  z-index: 1;
  position: absolute;
  bottom: -100px; /* to push to bottom (height/2) */
  left: -100px; /* to push to left (width/2) */
}

.img2-box {
  position: relative;
  display: inline-block;
}

.img2-box::before {
  position: absolute;
  content: '';
  width: 15px;
  height: 100%;
  left: 0;
  top: 0;
  background: #fff;
}

.img2-box::after {
  position: absolute;
  content: '';
  height: 15px;
  width: 60%;
  left: 0;
  top: 0;
  background: #fff;
}

.img2-box img {
  border: 15px solid #faa633
}

<div class="image-container">
  <img src="https://picsum.photos/id/10/200/200" class="img1">
  <div class="img2-box">
    <img src="https://picsum.photos/id/10/400/300" class="img2">
  </div>
</div>

Answer 2

你必须在 :before 中使用颜色请检查下面的代码

.outer {
 display: flex;
    align-items: flex-end;
}
img{max-width: 100%}
.img1 {
    position: relative;
    padding: 20px 0 0 20px;
    float: left;
    top: 90px;
    margin-right: -90px;
    width: 180px;
    z-index: 1;
}
.img2{
  position: relative;
  float: left;
  padding: 20px 20px 0 0;
  width: 400px;
      border-bottom: 20px solid red;
}
.img1 img, .img2 img{
  position: relative;
  display: block;
}
.img1:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 110px;
    height: 120px;
    background: red;
    display: block;
}
.img2:before{
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    height: 100%;
    background: red;
    display: block;
}

<div class="outer">
<div class="img1"><img src="https://webmeup.com/upload/blog/lead-image-105.png"></div>
   <div class="img2"> <img src="https://cdn.pixabay.com/photo/2015/02/24/15/41/dog-647528__340.jpg"> 
     </div>
</div>

希望！它适合你

如何将自定义边边框设置为图像并使其出现在其他图像上？

How to set custom sided border to image & make it appear on on other?

html

css

image

border