how to solve? diagonal is exited from the viewport using css

Question

how to solve? diagonal is exited from the viewport using css

Navigation

#1 by (3 votes)

1

I leave the following code maybe someone could give me some clues to solve: the image shows the error.

	h1{margin:0}
	
	.div-cut.top {
		top: 0;
		border-top: 250px solid #fff;
		border-right: 100vw solid red;
}
	.div-cut {
		position: absolute;
		z-index: 1;
		left: 0;
		width: 100%;
		height: 0;
	}

	.absolut{position:absolute;}
	.fix{position:fixed}
	
	.EstilosParaFondo{
		z-index:10; 
		top:0; top:0; left:0; right:0; 
		margin:auto;  
		background-image:url('images/imagenOK.jpg'); 
		background-size:cover; 
		background-repeat:no-repeat; 
		height: 450px; 
	}

  <div style="background:white; height:80vh; width:100%">
	<h1>Hello, world 1</h1>
  </div> 
  
  <div id="div2" style="position:relative; background-color:#FF4D4D;">
  
	<div id="triangle" class=" div-cut top">jofret</div>
	
	<div>

			<div style="height:100vh">
				<h1>Hello, world 2</h1>
				holaaaaaaaa
			</div>
			
			<div style="height:100vh">
				<h1>Hello, world 3</h1>
				holaaaaaaaa
			</div>
			<div style="height:100vh">
				<h1>Hello, world 4</h1>
				holaaaaaaaa
			</div>
			<div style="height:100vh">
				<h1>Hello, world 5</h1>
				holaaaaaaaa
			</div>
			<div style="height:100vh">
				<h1>Hello, world 6</h1>
				holaaaaaaaa
			</div>
			<div class="opera" style="height:100vh">
				<h1>Hello, world 7</h1>
				holaaaaaaaa
			</div>
			
		</div>	
  </div>

css viewport

asked by jofret 28.08.2018 в 16:42

source

1 answer

Save image to disk from a NumPy array How can I eliminate the line breaks generated by a String?

score 3 · Accepted Answer

Analyzing what you tell me, I understand that this would be a solution to your problem, what I did was add body margin: 0; and change the attribute left of class .div-cut by right , I hope it works for you.

body {
    margin: 0;
}
h1{margin:0}
    
.div-cut.top {
    top: 0;
    border-top: 250px solid #fff;
    border-right: 100vw solid red;
}
.div-cut {
    position: absolute;
    z-index: 1;
    right: 0;
    width: 100%;
    height: 0;
}

.absolut{position:absolute;}
.fix{position:fixed}

.EstilosParaFondo{
    z-index:10; 
    top:0; top:0; left:0; right:0; 
    margin:auto;  
    background-image:url('images/imagenOK.jpg'); 
    background-size:cover; 
    background-repeat:no-repeat; 
    height: 450px; 
}

<!DOCTYPE html>
<html>
<body>
    

    <div style="background:white; height:80vh; width:100%">
    <h1>Hello, world 1</h1>
  </div> 
  
  <div id="div2" style="position:relative; background-color:#FF4D4D;">
  
    <div id="triangle" class=" div-cut top">jofret</div>
    
    <div>

            <div style="height:100vh">
                <h1>Hello, world 2</h1>
                holaaaaaaaa
            </div>
            
            <div style="height:100vh">
                <h1>Hello, world 3</h1>
                holaaaaaaaa
            </div>
            <div style="height:100vh">
                <h1>Hello, world 4</h1>
                holaaaaaaaa
            </div>
            <div style="height:100vh">
                <h1>Hello, world 5</h1>
                holaaaaaaaa
            </div>
            <div style="height:100vh">
                <h1>Hello, world 6</h1>
                holaaaaaaaa
            </div>
            <div class="opera" style="height:100vh">
                <h1>Hello, world 7</h1>
                holaaaaaaaa
            </div>
            
        </div>  
  </div>
    
</body>
</html>