Image border that covers half bottom and half right only-CodePudding

Am trying to display a photo like this on a webpage:

If anyone knows an easier way to achieve this, please share. This is what I have so far:

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

This works really fine guys but my problem is, am not able to use % for the .border-box height value(like I have with the width). So when I use 300px, its not responsive and on small screens, the border becomes like three times larger than the image.

How can I use % in the height value or how can I make the height responsive respectively with every screen size? Or is there an easier way to achieve the whole thing?

CodePudding user response：

[![enter image description here][1]][1]maybe you can do like this

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


  [1]: https://i.stack.imgur.com/NuWF7.png

CodePudding user response：

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