CSS中的左邊框高度

Question

我有一個小提琴 ，我正嘗試照此 圖像所示進行復制。 目前，我可以在圖像上放置邊框，但是由於某些原因，我無法增加左邊框的高度。 我很確定它將通過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);
}

Answer 1

如果將圖像包裝在一個元素中，則可以在父元素和該父元素的偽元素上使用邊框來偽造與父/圖像高度不同的邊框。

可以使用bottom來控制高度，或與取代底部height和使用類似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

您可以通過在圖像外部放置一個容器並設置容器高度來解決此問題。

.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

您最終可以在img標簽上使用box-shadow ：

 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/