Html css中的左边框高度

我有一个问题，我正试图复制，因为它是如图所示。此时，我可以在图像上设置边界，但由于某些原因，我无法增加左侧边界的高度。我很确定它会通过CSS选择器完成，但不确定如何完成。我用于在图像上放置边框的CSS是：

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

---

如果将图像包装在元素中，则可以使用父元素上的边框和该父元素的伪元素来伪造与父元素/图像高度不同的边框

您可以使用

bottom

来控制高度，或者将bottom替换为

height

并使用类似

height:calc（100%+100px）的方法


div
{ 
位置：相对位置；
左：20px；
右边框：2倍实心rgb（254,91,31）；
边框顶部：2个实心rgb（254,91,31）；
显示：内联块；
}
img{
垂直对齐：顶部；
}
div{
位置：相对位置；
}
div：：之后{
位置：绝对位置；
顶部：0；左侧：0；底部：-100px；
宽度：2倍；
背景：rgb（254,91,31）；
内容：''；
}
您可以通过在图像外放置一个容器并设置容器高度来解决此问题

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

.container{
左边框：2倍实心rgb（254,91,31）；
右边框：2倍实心rgb（254,91,31）；
边框顶部：2个实心rgb（254,91,31）；
高度：400px；
显示：内联块；
}
.头盔图像1
{  
位置：相对位置；
左：20px；
}
您最终可以在img标签上使用
框影
：


img{
填充：5px；/*可选*/
垂直对齐：顶部；/*可选*/
盒影：-2px-2px rgb（254,91,31），0171px白色，-2px 170px rgb（254,91,31），2px-2px rgb（254,91,31），2px-1px rgb（254,91,31），0px-2px rgb（254,91,31）；
边界半径：5px 5px 0/*可选*/
}
/*小片段的演示用途*/
车身{最小高度：400px；}


要测试的文本
您所说的边框高度是什么意思？请解释一下这是你想做的吗@MichaelCoker是的，没错。我们可以不使用div（不将image类放在div中）来实现这一点吗？不，你不能只使用一个边框，除非图像的一部分是透明的或其他东西。伪元素不适用于图像，因此必须将它们应用于标准元素。