CSS中的左边框高度

Question

I have a fiddle and I am trying to copy as it is as shown in this image . At this moment, I am able to put borders across an image but for some reasons I am not able to increase the height of border-left. I am pretty sure it will done through CSS selectors but not sure how. The CSS which I have used to put the borders across an image is:

.helmet-image1
{
position: relative;
left: 20px;
border-left: 2px solid rgb(254, 91, 31);
border-right: 2px solid rgb(254, 91, 31);
border-top: 2px solid rgb(254, 91, 31);
}

Answer 1

If you wrap the image in an element, you can use borders on the parent and pseudo elements of that parent element to fake a border that is a different height than the parent/image.

You can use bottom to control the height, or replace bottom with height and use something like height: calc(100% + 100px);

 div { position: relative; left: 20px; border-right: 2px solid rgb(254, 91, 31); border-top: 2px solid rgb(254, 91, 31); display: inline-block; } img { vertical-align: top; } div { position: relative; } div::after{ position: absolute; top: 0; left: 0; bottom: -100px; width: 2px; background: rgb(254,91,31); content: ''; } 

 <div> <img class="helmet-image1" src="https://s24.postimg.org/m3yekb9n9/i_Stock- 516143705.png"> </div> 

Answer 2

You could solve this by putting a container outside your image, and setting the container height.

.container {
  border-left: 2px solid rgb(254, 91, 31);
  border-right: 2px solid rgb(254, 91, 31);
  border-top: 2px solid rgb(254, 91, 31);
  height: 400px;
  display: inline-block;
}
.helmet-image1
{  
  position: relative;
  left: 20px;
}

<div class="container">
    <img class="helmet-image1" 
    src="https://s24.postimg.org/m3yekb9n9/i_Stock-516143705.png">
</div>

Answer 3

you could use box-shadow on img tag eventually:

 img { padding: 5px;/*optionnal */ vertical-align: top;/*optionnal */ box-shadow: -2px -2px rgb(254, 91, 31), 0 171px white, -2px 170px rgb(254, 91, 31), 2px -2px rgb(254, 91, 31), 2px -1px rgb(254, 91, 31), 0px -2px rgb(254, 91, 31); border-radius: 5px 5px 0 0/*optionnal */ } /* demo purpose for small snippet */ body {min-height:400px;} 

 <img class="helmet-image1" src="https://s24.postimg.org/m3yekb9n9/i_Stock- 516143705.png"> <br/> text to test 

https://jsfiddle.net/9b7uaoj2/15/