Creating a diagonal div

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 it?

  • The text should stay straight
  • The Skew property, as directed by some users, does not work because it distorts the image
asked by anonymous 18.09.2017 / 20:37

2 answers

2

How do I make the button tilted? and Diagonal button 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; This should have the same value as the main-banner , however it should be the negative value.

18.09.2017 / 20:43
0

I made some changes in Guilherme Nascimento's response so that the "pseudo-element" is responsive in case the banner will change 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><!DOCTYPEhtml><html><head><title></title></head><body><divid="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 bug of 0.5px separating the parent div, so a "right":"-" + (newValueW - 0.5) was placed in .css() ;

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

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

  • For more details, leave your comment, as soon as I see it, I'll be responding

20.09.2017 / 19:37