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

【问题标题】：Image border that covers half bottom and half right only仅覆盖一半底部和一半右侧的图像边框
【发布时间】：2021-10-13 14:53:31
【问题描述】：

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

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

.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 时，它没有响应并且在小屏幕上，边框变得比图像大三倍。

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

【问题讨论】：

女巫是about-us-body-img, about-img CSS ?
你可以做的就是创建 4 个 div.parent 潜水位置 relative.and 3 个 div 里面有绝对位置和 z-index 你可以用百分比和你想要的任何东西创建那个图像。顶角 lerf zindex 100 主图 zindex 90 蓝色方块 zindex 80 例如
jsfiddle.net/76psmLfh

标签： html css responsive-design

【解决方案1】：

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

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%);
}

&lt;img src="https://picsum.photos/200"&gt;

【讨论】：

这是最简单的解决方案。它很容易解决了我的问题。

【解决方案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>

【讨论】：

【解决方案3】：

也许你可以这样做

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

【讨论】：