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