仅覆盖一半底部和一半右侧的图像边框

Question

我正在尝试在网页上显示这样的照片：

如果有人知道实现此目的的更简单方法，请分享。这是我目前所拥有的：

.border-box{
        height: 300px;
        margin-top: -65%;
        width: 75%;
        float: right;
        margin-right: -8%;
        border-bottom: 2px solid #004689;
        border-right: 2px solid #004689;
        background: #004689 0% 0% no-repeat padding-box;
        opacity: 1;
    }

<div class="about-us-body-img">
        <div class="about-img"><img src="https://picsum.photos/200"></div>
        <div class="border-box"></div>
    </div>

伙计们，这真的很好用，但我的问题是，我无法将 % 用于 .border-box 高度值（就像我使用的宽度值一样）。所以当我使用 300px 时，它没有响应并且在小屏幕上，边框变得比图像大三倍。

如何在高度值中使用 % 或者如何使高度响应每个屏幕尺寸？或者有没有更简单的方法来实现整个目标？

Answer 1

也许你可以这样做

<style>
  .about-img {
    width: 200px;
    height: 200px;
  }
  
  .border-box {
    background-color: blue;
    width: 150px;
    height: 150px;
    margin-top: -130px;
    margin-left: 70px;
  }
</style>

Answer 2

.main {
  width: 300px;
  height: 300px;
  background: red;
  position: relative;
}
.middle {
  position: absolute;
  width: 90%;
  height: 90%;
  top: 0;
  left: 0;
  z-index: 90;
  background: black;
}
.top {
  width: 0; 
  height: 0; 
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent; 
  border-right:20px solid blue; 
  z-index: 100;
  top:-13px;
  left:-3px;
  position: absolute;
  transform: rotate(45deg);
}
.bottom {
  width:50%;
  height:50%;
  background: yellow;
  position:absolute;
  bottom:0;
  right:0;
  z-index: 80;
}

<div class="main">
   <div class="top">
   
   </div>
   <div class="middle">
   
   </div>
   <div class="bottom">
   
   </div>
</div>

Answer 3

仅使用图片标签的解决方案：

img {
  /* add bottom border */
  padding:0 20px 20px 0;
  background:linear-gradient(blue 0 0) 100% 100% / 60% 60% no-repeat;
  /* cut top corner */
  clip-path:polygon(30% 0,100% 0,100% 100%,0 100%,0 30%);
}

<img src="https://picsum.photos/200">

仅覆盖一半底部和一半右侧的图像边框

Image border that covers half bottom and half right only

html

css

responsive-design