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

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

仅使用图像标签的解决方案:

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