围绕所有内容的div的背景颜色

Question

我正在研究一个'arrow'-div.它目前看起来像这样:

div包含另外两个div(两行).我希望背景几乎缠绕在线条上.但黄色背景的高度比线条的高度小很多.我已经尝试过'height:auto'了.我希望有人可以帮助我.

#lineAll {
  background-color: yellow;
  height: auto;
}

#line1 {
  height: 2px;
  background-color: black;
  transform: rotate(35deg);
  width: 40px;
}

#line2 {
  height: 2px;
  background-color: black;
  transform: rotate(-35deg);
  width: 40px;
  margin-top: 20px;
}

<div id="lineAll">
  <div id="line1"></div>
  <div id="line2"></div>
</div>

编辑:

宽度也不是我想要的方式.它目前是屏幕的100%宽度.

Answer 1

尝试这个：

<div style="background-color : yellow; padding: 15px 0px; width: 40px;">
    <div id="lineAll">
       <div id="line1"></div>
       <div id="line2"></div>
    </div>
</div>

<style>
#lineAll {
   background-color: yellow;
   height: auto;
}

#line1 {
  height: 2px;
  background-color: black;
  transform: rotate(35deg);
  width: 40px;
}

#line2 {
  height: 2px;
  background-color: black;
  transform: rotate(-35deg);
  width: 40px;
  margin-top: 20px;
}