Question

我在下面创建了以下横幅，使用三角形和矩形来创建图像所需的横幅。但是，如果用户放大浏览器，则这两个容器之间存在间隙。任何想法如何我可以将两个容器固定在一起，或者是否有更好的方法来编写这个横幅一般使用CSS？提前致谢！：）

代码：

<html>
<style>
 #triangle {
    width: 0;
    height: 0;
    border-bottom: 150px solid red;
    border-right: 50px solid transparent;
    top: 8px;
    position: relative;
}

#square {
    background-color:red;
    height:150px;
    width:300px;
    z-index: 3;
    margin-left: 8px;
    top: 8px;
    position: relative;
    color: white;
}

.align div {
  display:inline-block;
  float: left;
}


</style>
<div class="img">
    <img src="IMAGE HERE" alt="test" width="800" height="150">
</div>
<div class="align">
  <div id="square"> 
    <h1>
    Headline
    </h1>
    <p>
    Some text here!
    </p>
  </div>
  <div id="triangle"></div>
</div>
</html>

Answer 1

我在浏览器上的矩形和三角形之间没有看到任何空白区域。但是我清理了你的代码，所以你可以试试这个：

＆＃13;

#triangle {
    width: 0;
    height: 0;
    border-bottom: 150px solid red;
    border-right: 50px solid transparent;
  top: 8px;
  position: relative;
}

#square {
    background-color:red;
    height:150px;
    width:300px;
    z-index: 3;
    margin-left: 8px;
    top: 8px;
    position: relative;
    color: white;
}

.align div{
  display:inline-block;
  float: left;
}

.align {
  min-width:450px;
}

＆＃13;

<div class="align">
  <div id="square"> 
    <h1>
      Title
    </h1>
    <p>
    Some text here.......
    </p>
  </div>
  <div id="triangle"></div>
</div>

＆＃13;

编辑：修正了400％变焦时的对齐。已将min-width添加到.align。

Answer 2

此问题取决于浏览器，并非所有浏览器都显示相同的问题。 Chrome可能显示完美，但Mozilla可能会出现问题。另外，使用reset css可以避免任何与浏览器相关的css属性。

在浏览器缩放上修复容器并调整大小

2 个答案: