javascript - 我怎样才能把这个让这个框像图片中那样放在文本下面

Question

我正在尝试制作上面的布局。但不幸的是，我不能把它作为上面的布局。我得到第二张图片作为我的结果。

代码:

.text_box_holder{
  position: relative;

}
.text_box_holder h1{
  text-align: right;
  padding-right: 50%;
  color: #fff;
  background: inherit;
  -webkit-background-clip: text;
}
.learn_more_in_box{

  color: #fde428;
  text-align: right;
  padding-left: 31% !important;

  -webkit-background-clip: text;

}
.yellow_box{
  position: absolute;
  border: 7px solid #fde428;
  width: 40%;
  height: 300px;

}

  <div class="text_box_holder">
    <div class="yellow_box"></div>
    <h1>Consumer<br>Products<br>Consulting</h1>
    <a href="" class="learn_more_in_box">LEARN MORE</a>
  </div>

Answer 1

请尝试以下代码。我没有添加任何背景图像。我试过只用方框添加 2 个文本。

HTML

<div class="text_box_holder">
    <div class="yellow_box"> </div>
    <div class="text1"> 
      <h1>Consumer<br>Products<br>Consulting</h1>
      <div class="text2"><a href="">LEARN MORE</a></div>
    </div>
  </div>

CSS

.text1 {
  margin-top: 30px;
  position:absolute;
  text-align: left;
  color: #bc7e09;
}
.yellow_box{
  margin-left: 60px;
  position: absolute;
  border: 5px solid #fde428;
  width: 40%;
  height: 300px;
}

如果你想为整个空间添加背景图像，你可以与HTML集成。我希望它能帮助你。

演示:https://jsfiddle.net/Ltxktaad/21/