3

Bom, estou com dúvidas sobre a criação de uma div, com dois elementos, separados por uma linha em diagonal, conforme a imagem abaixo, como posso realizar a criação ?

inserir a descrição da imagem aqui

  • O texto deve manter-se reto
  • A propriedade Skew, conforme orientada por alguns usuários, não funciona, pois distorce a imagem
2
  • Acho que isso pode resolver seu problema. Solução 18/09/2017 às 18:43
  • skew não resolve, tanto que no próprio fiddle realizado, a imagem fica distorcida 18/09/2017 às 18:49

2 Respostas 2

2

Como respondi em Como fazer botão Inclinado? e Botão na diagonal só o lado esquerdo, você pode usar pseudo elementos:

.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>

Explicações:

  • border-top: 200px solid transparent; o 200px deve ter a mesma altura do main-banner, ajustando a altura deve ajustar aqui.

  • border-left: 100px solid #CC0000; este deve ter a mesma medida que o right, no entanto com o valor positivo, a deve ser a mesma do background-color no seletor .banner-l

  • right: -100px; este deve ter o mesmo valor que o border-left, no entanto deve ser o valor negativo.

6
0

Fiz algumas alterações na resposta do Guilherme Nascimento para que o "pseudo-elemento" seja responsivo caso, o banner venha a mudar de tamanho em todas as resoluções possíveis.

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>

Algumas considerações:

  • Por que "pseudo-elemento"?

Bom, não é verdadeiramente um pseudo-elemento, mas um elemento qualquer, que segue o mesmo comportamento que o pseudo-elemento receberia.;

  • Dependendo do grau de inclinação da linha separatória, ela gera um pequeno bug de 0.5px de separação da div pai, para isso, foi colocado um "right":"-" + (newValueW - 0.5) no .css();

  • O valor pxH é equivalente ao pxW, pois ajuda a definir altura do "pseudo-elemento" de acordo com a largura/altura da tela/main-banner;

  • Algumas declarações CSS no banner, e nas divs que possuem conteúdo, como a declaração de width:46...% ou o flex-grow;1 foram colocados para que a linha divida o conteúdo no centro da tela, sem essas declarações, a linha começaria de 50% na ponta superior, e acabaria em algo como 53~54% na linha inferior

  • Para outros detalhes, deixe seu comentário, assim que eu ver, estarei respondendo

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .