Creation of diagonal div

Asked

Viewed 828 times

3

Well, I’m having doubts about creating a div, with two elements, separated by a diagonal line, according to the image below, how can I create ?

inserir a descrição da imagem aqui

  • The text should remain straight
  • The Skew property, as directed by some users, does not work because it distorts the image
html css

  • I think this might solve your problem. Solution

  • skew does not solve, so much so that in the accomplished fiddle itself, the image is distorted

2 answers

2


How did I respond in How to Make Tilt Button? and Button diagonally only the left side, you can use pseudo elements:

.main-banner {
   width: 600px;
   height: 200px;
   background: #ccc;
   position: relative;
}

.main-banner > .banner-img {
   background: #fc0;
   position: absolute;
   top: 0;
   right: 0;
   width: 50%; /* pode ajustar a largura do Element 2 (foto)*/
   height: 100%;
}

.main-banner > .banner-l {
  color: #fff;
  position: relative;/*faz os elementos pseudos acompanharem o elemento com a classe*/
  width: 50%; /* pode ajustar a largura do Element 1 (verde)*/
  height: 100%; /*Acompanha a altura do elemento*/

  /* altera a cor, deve ser a mesma corda do border no :before*/
  background-color: #01b215;
}

.banner-l:before {
  content: "";
  width: 0px;
  height: 0px;
  top: 0px;
  position: absolute;
  
  /*ajuste aqui*/
  
  border-top: 200px solid transparent;
  border-left: 100px solid #01b215; /*altere a cor aqui, deve ser a mesma cor do background-color no banner-l*/
  right: -100px;
}
<div class="main-banner">
    <div class="banner-img">Banner</div>
    <div class="banner-l">Left</div>
</div>

Explanations:

  • border-top: 200px solid transparent; 200px should be the same height as main-banner, adjusting the height should adjust here.

  • border-left: 100px solid #CC0000; it must have the same measure as the right, however with the positive value, a must be the same as the background-color in the selector .banner-l

  • right: -100px; it must have the same value as border-left, however it must be the negative value.

  • the border-top accepts values in percentage ?

  • All right, thank you so much @Guilhermenascimento

  • I reworked the code, but the edge doesn’t pick up tilt at all its length, it gets straight up and down after a while

  • 1

    https://chat.stackexchange.com/rooms/65805/problemas-da-div

  • ta on localhost

  • @Murilogambôa to there in chat, we will continue there

Show 1 more comment

0

I made some changes to Guilherme Nascimento’s response so that the "pseudo-element" is responsive if the banner changes in size in all possible resolutions.

var windowHeight = $(window).height();
	var pxH = 5.166666666666667;
	var pxW = 1;
	function adaptativeMainBanner(){
		var newWindowHeight = $(window).height();
		var newValueW = newWindowHeight / pxH;

		$(".pseudo-before").css({"border-top":newWindowHeight + "px solid transparent","right":"-" + (newValueW - 0.5) + "px","border-left":newValueW + "px solid #fff"});
		return windowHeight = newWindowHeight;	
	}
	$(window).resize(function(){
		adaptativeMainBanner();
	});
	$(document).ready(function(){
		adaptativeMainBanner();
	});
*{
	margin:0;
	padding:0;
	box-sizing:border-box;
}
html,body{
	height:100%;
}
#main-banner-holder{
	width:100%;
	height:100%;
	display:flex;
}
#main-banner{
	position:relative;
	overflow:hidden;
	flex-grow:1;
  background-color:rgba(0,0,0,1);
}
#main-banner > img{
	min-width:100%;
	height:100%;
	position:absolute;
	left:50%;
	top:50%;
	transform:translate(-50%,-50%);
}
#main-text-banner{
	position:relative;
	background-color:#fff;
	width:46.588541666666664%;
	height:100%;
	padding:12px;
	display:flex;
	flex-direction:column;
	align-items:center;
}
#main-text-banner .pseudo-before{
	content:"";
	position:absolute;
	width:0;
	height:0;
	top:0;
	bottom:0;
	z-index:5;
	border-top:620px solid transparent;
	border-left:120px solid #fff;
	right:-120px;
	/* 620pxH - 150pxW */
	/* 4,133333333333333 */
}
#main-text-banner > div{
	flex-grow:1;
	margin-top:16px;
}
#main-text-banner > div *{
	text-align:justify;
}
@media(max-height:300px){
	#main-banner > img{
		height:auto;
		max-height:200%;
	}
}
@media(max-height:500px){
	#main-banner > img{
		height:auto;
		max-height:140%;
	}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>

	<div id="main-banner-holder">
		<div id="main-text-banner">
			<span class="pseudo-before"></span>
			<h2>Memento Mori</h2>
			<div>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</p>
				
			</div>
		</div>
		<div id="main-banner">
			<!-- Caso queira uma imagem de fundo: <img src="img/company/banners/main-banner.jpg"> -->
		</div>
	</div>
</body>
</html>

Some considerations:

  • Why "pseudo element"?

Well, it’s not really a pseudo-element, but some element, which follows the same behavior that the pseudo-element would receive.;

  • Depending on the degree of inclination of the separator line, it generates a small 0.5px separation bug from the parent div, for this, a "right":"-" + (newValueW - 0.5) in the .css();

  • The pxH value is equivalent to pxW as it helps to define "pseudo-element" height according to the width/height of the screen/main-banner;

  • Some CSS statements on the banner, and on Divs that contain content, such as the width:46...% or the flex-grow;1 were placed so that the line would divide the content in the center of the screen, without these statements, the line would start at 50% at the top, and would end up at something like 53~54% at the bottom line

  • For other details, leave your comment, as soon as I see, I will be responding

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.