Image border that covers half bottom and half right only

user_16329120 0
Viewed 284

Am trying to display a photo like this on a webpage:note the blue border

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?

responsive-design css html
3 Answers

A solution using only the image tag:

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

user_86203330

enter image description here

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

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

user_68848840
Related