html - 内部所有内容周围的 div 的背景颜色

Question

我正在研究“箭头”-div。目前看起来像这样:

div 包含另外两个 div(两行)。我希望背景几乎包裹在线条周围。但是黄色背景的高度比线条的高度小很多。我已经尝试过“高度:自动”。我希望有人能帮助我。

#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;
}