I need to remove a little space between my divided blocks

user_17124076 0
Viewed 73

There is a little space between my two divided blocks.

https://i.imgur.com/l411V0t.png here you can see my problem. I've can’t figure out why the blocks act like this.

body, main {
  width: 100%;
  margin: 0;
  background: black;
}

.container {
  display: block;
  height: 200px;
  margin: auto;
}

.block {
  width: 100%;
  height: 100%;
  background: 
    linear-gradient(-135deg, transparent 45px, wheat 0) top right,
    linear-gradient(45deg, transparent 45px, wheat 0) bottom left;
    background-size: 100% 50%;
    background-repeat: no-repeat;
}
<main>
  <div class="container">
    <div class="block">
    </div>
  </div>
</main>

css html
2 Answers

In Firefox there is no gap to be found, in Edge and IE it shows so it seems to be a sizing issue. Increasing the background size to 51% closes the gap also in Edge.

I'll try to find how the different browsers calculate background sizes.

body, main {
  width: 100%;
  margin: 0;
  background: black;
}

.container {
  display: block;
  height: 200px;
  margin: auto;
}

.block {
  width: 100%;
  height: 100%;
  background: 
    linear-gradient(-135deg, transparent 45px, wheat 0) top right,
    linear-gradient(45deg, transparent 45px, wheat 0) bottom left;
    background-size: 100% 51%;
    background-repeat: no-repeat;
}
<main>
<div class="container">
<div class="block">
</div>
</div>
</main>

user_11787590

Interesting question, while when the container height is set to even number pixel, the line will be removed. When the container height is odd pixel, the line will be displayed.

The key factor should be background-size: 100% 50%; , so you could use scss round function to skip the rounding problem here.

user_138044730
Related