I'm trying to achieve this type of Design
Where on the left corner there's a div container white background color
and behind of that container there's an image
I'm not sure where to start using css.
But I believe this is possible using css only.
I have this html codes
<div style="background: url("../image.jpg"); background-size:cover; background-repeat: none; ">
<div class="half-triangle"></div>
</div>
You could use transform: rotate() and overflow: hidden on the outer element
.wrapper {
width: 500px;
border: 2px solid;
overflow: hidden;
height: 200px;
position: relative;
}
.background {
background: red;
width: 100%;
height: 100%;
}
.text {
display: flex;
position: absolute;
width: calc(50% + 50px);
height: calc(100% + 200px);
left: 0;
top: 0;
padding-left: 100px;
justify-content: center;
align-items: center;
background: white;
transform: rotate(15deg) translate(-100px, -100px);
}
.inner {
transform: rotate(-15deg);
}
<div class="wrapper">
<div class="text">
<div class="inner">
Some text here..
</div>
</div>
<div class="background">
</div>
</div>
See solution on codepen
Related
I want to add some text on a webpage, which will show up on the right edge of a container.
The only way I can think of is to fake the color of the text as the background color of the outsider container. But this implementation is quite risky as the outside background can be of different colors or even images on it.
How do I cut off the part that is outside of the parent container in CSS?
.container {
margin: 2em;
position: relative;
width: 400px;
height: 200px;
background: #f1f1f1
}
.ads {
position: absolute;
right: 0;
width: 5px;
text-align: center;
top: 50%;
background: black;
/* color: white; */
transform: translateY(-50%);
transition: 1s
}
.ads b {
pointer-events: none;
width: 100px;
display: block
}
.ads:hover {
width: 100px;
}
.high-level-container {
margin: 2em;
width: 500px;
height: 600px;
background: yellow;
}
<h3> The hack works </h3>
<div class="container">
<div class="ads">
<b>Some Ads</b>
</div>
</div>
<h3> The hack fails </h3>
<div class="high-level-container">
<div class="container">
<div class="ads">
<b>Some Ads</b>
</div>
</div>
</div>
If you want hide the rest text, you can use overflow:hidden;.
.container{overflow:hidden;}
But if you need wordbreak, use :
b{word-break: break-all;}
.container {
margin: 2em;
position: relative;
width: 400px;
height: 200px;
background: #f1f1f1
}
.ads {
position: absolute;
right: 0;
width: 5px;
text-align: center;
top: 50%;
background: black;
/* color: white; */
transform: translateY(-50%);
transition: 1s;
overflow:hidden; <-- This one
}
.ads b {
pointer-events: none;
width: 100px;
display: block
}
.ads:hover {
width: 100px;
}
.high-level-container {
margin: 2em;
width: 500px;
height: 600px;
background: yellow;
}
<h3> The hack works </h3>
<div class="container">
<div class="ads">
<b>Some Ads</b>
</div>
</div>
<h3> The hack fails </h3>
<div class="high-level-container">
<div class="container">
<div class="ads">
<b>Some Ads</b>
</div>
</div>
</div>
I am using absolute and relative positioning to horizontally and vertically center a div in a container div. Adjacent to this container is another div which should fit neatly beside the container inside the top-level container div. But instead, it moves down, almost completely out of the boundary of the top-level div. Source code:
#top-level {
background: #90c0ff;
height: 400px;
width: 600px;
}
#container {
background: #bbffbb;
height: 400px;
width: 400px;
display: inline-block;
position: relative;
text-align: center;
}
#inner {
height: 200px;
width: 200px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
border: 1px solid black;
}
#adjacent {
background: #ff5050;
height: 395px;
width: 195px;
display: inline-block;
}
<div id="top-level">
<div id="container">
<div id="inner">
Internal Text
</div>
</div>
<div id="adjacent">
Sample text
</div>
</div>
Example fiddle here
Any ideas on why the adjacent div doesn't align properly?
You could use flex on the parent instead of inline-block on the children, would solve the issue of the second box being pushed down if there isn't enough space:
#top-level {
background: #90c0ff;
height: 400px;
width: 600px;
}
#container {
background: #bbffbb;
height: 400px;
width: 400px;
position: relative;
text-align: center;
display: inline-block;
vertical-align:top;
}
#inner {
height: 200px;
width: 200px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
border: 1px solid black;
}
#adjacent {
background: #ff5050;
height: 395px;
width: 195px;
display: inline-block;
vertical-align:top;
}
<div id="top-level">
<div id="container">
<div id="inner">
Internal Text
</div>
</div>
<div id="adjacent">
Sample text
</div>
</div>
If you want to know the actual reason for your alignment issues, it's because you have two inline block elements that are different heights next to each other.
The default vertical alignment for inline block elements is baseline which means that you get the effect that you see.
If you change the vertical align to top for both the container and the adjacent, your code will work as you want:
#top-level {
background: #90c0ff;
height: 400px;
width: 600px;
/* add te following */
display: flex;
justify-content: space-between;
}
#container {
background: #bbffbb;
height: 400px;
width: 400px;
position: relative;
text-align: center;
}
#inner {
height: 200px;
width: 200px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
border: 1px solid black;
}
#adjacent {
background: #ff5050;
height: 395px;
width: 195px;
}
<div id="top-level">
<div id="container">
<div id="inner">
Internal Text
</div>
</div>
<div id="adjacent">
Sample text
</div>
</div>
I want a centered div and I wand left side of it to be filled with color (as in my examples).
I have 2 solutions (not using flexbox) here and they both feel like hacks.
body {
margin: 0;
padding: 0;
}
.header {
width: 100%;
height: 60px;
position: fixed;
}
.center-part {
width: 500px;
margin: 0 auto;
height: inherit;
background-color: rgba(0,255,0,0.8);
position: relative;
}
.blue-big {
background-color: blue;
width: 9999px;
height: inherit;
position: absolute;
right: 500px;
}
.equal-side {
display: table-cell;
}
<div class="header" style="top: 0px">
<div class="center-part">
<div class="blue-big">
</div>
</div>
</div>
<div class="header" style="top: 70px; display: table;">
<div class="equal-side" style="background-color: blue">
</div>
<div class="center-part" style="display: table-cell;">
</div>
<div class="equal-side">
</div>
</div>
Top one uses large div and positioning, but second one uses "display: table"
I'd like to know if any of them is good ok kinda practice or should I do this someway else?
Blue Green DIV will not actually be full height, so putting div in background with 50% width is not an option
A more simple solution is to use linear-gradient like this:
.container {
background: linear-gradient(to right, green 50%, transparent 0) 0 0/100% 40% no-repeat;
height: 100px;
background-color:rgba(255,0,0,0.5);
}
.container>div {
width: 300px;
height: 40%;
background:blue;
margin: 0 auto;
}
<div class="container">
<div></div>
</div>
Or consider a pseudo element overflowing:
.container {
overflow:hidden;
height: 100px;
}
.container>div {
width: 300px;
height: 100%;
background:blue;
margin: 0 auto;
position:relative;
}
.container>div:before {
content:"";
position:absolute;
top:0;
right:0;
left:-1000%;
bottom:0;
background:green;
z-index:-1;
}
<div class="container">
<div></div>
</div>
This solution works for me https://codepen.io/anon/pen/GdeYdK?editors=1100
HTML:
<div class="test-header">
<div class="equal-side left-side">
</div>
<div class="center-part">
<div class="center">
SOME TEXT HERE
</div>
</div>
<div class="equal-side right-side">
</div>
</div>
CSS:
.test-header {
position: relative;
width: 100%;
height: 60px;
text-align: center;
}
.equal-side {
display: inline-block;
height: 100%;
width: 49%;
}
.left-side {
background: blue;
}
.right-side {
background: red;
}
.center-part {
background: white;
width: 500px;
height: 60px;
display: block;
position: absolute;
margin-left: -250px; /*half of center element's width*/
left: 50%;
top: 0;
}
.center {
width: 100%;
border: 1px dashed;
}
You can use a linear gradient and need only one element - see also CSS-tricks on this topic. They have great explanations on how to do this kind of thing.
In my original answer I forgot to include the container to center the div. I've updated to two examples - one using flexbox and one without. I'm not quite sure if you cannot use flexbox, or don't want to - so I've included both.
.container {
display: flex;
justify-content: center;
}
.bar {
height: 50px;
width: 400px;
background-image:
linear-gradient(
to right,
red,
red 50%,
orange 50%,
orange 100%
);
}
.bar-noflexbox {
height: 50px;
width: auto;
margin: 1rem 20%;
background-image:
linear-gradient(
to right,
red,
red 50%,
orange 50%,
orange 100%
);
}
<div class="container">
<div class="bar"></div>
</div>
<div>
<div class="bar-noflexbox"></div>
</div>
There are a few answers out there about how to skew the single side of a div both empty and with images:
CSS3 Transform Skew One Side
Skew one side only of an element
But using these answers, I cannot figure out the rest of my issue.
I am attempting to create a 2 column row with an image background for the second column and a skewed or angled left side. The problem I have is filling the space with the containers after they have been skewed.
I am using Foundation 6 as the primary framework behind my site.
I have attached an image of how it should look completed
The closest I have got so far is this:
I have posted the code I have so far below.
Codepen
HTML:
<section class="lan_primary">
<div class="container-full">
<div class="row wide">
<div class="columns small-12 medium-6 lan_primary--select">
CONTENT LEFT
</div>
<div class="columns small-12 medium-6 lan_primary--img">
CONTENT
</div>
</div>
</div>
</section>
CSS:
div {
border: 1px red solid;
}
.lan_primary {
width: 100%;
height: 80vh;
margin-top: 10vh;
overflow: hidden;
.row {
flex-flow: row !important;
overflow: hidden;
}
&--select,
&--img {
padding: 100px 0;
overflow: hidden;
position: relative;
}
&--select {
background-color: aqua;
}
&--img {
background-color: blue;
transform-origin: top left;
transform: skew(-20deg);
//margin-left: 80px;
}
}
UPDATE - from first answer
Adding a pseudo element to solve causes problems with variable heights. If I were to set 100vh, it would give a different result to if I were to set height: 700x;.
See image below:
Use the triangle border trick with a pseudo. With viewport units it will scale with the height
To make the skew centered, I sized the right 25px (half of the skewed
area) wider than the left.
html, body {
margin: 0;
}
.wrapper {
display: flex;
}
.left, .right {
height: 100vh;
}
.left {
flex-basis: calc(50% - 25px);
position: relative;
background: lightgray;
display: flex;
align-items: center;
}
.left::after {
content: '';
position: absolute;
top: 0;
left: 100%;
height: 0;
width: 0;
border-top: 100vh solid lightgray;
border-right: 50px solid transparent;
}
.right {
flex-basis: calc(50% + 25px);
background: url(http://lorempixel.com/500/500/people/10/) left center no-repeat;
background-size: cover;
}
<div class="wrapper">
<div class="left">
<h1>Some text</h1>
</div>
<div class="right"></div>
</div>
You can Make use of the pseudo elements to make the look skewed one side
CSS(SCSS)
div {
border: 1px red solid;
}
.lan_primary {
width: 100%;
height: 80vh;
margin-top: 10vh;
overflow: hidden;
.row {
flex-flow: row !important;
overflow: hidden;
}
&--select,
&--img {
padding: 100px 0;
overflow: hidden;
position: relative;
}
&--select {
background-color: aqua;
position: relative;
overflow:visible;
&::after{
content:"";
position: absolute;
z-index:1;
top:0;
bottom:0;
height:100%;
width:20%;
background-color: cyan;
right:-40px;
transform:skew(-20deg);
}
}
&--img {
background-color: blue;
transform-origin: top left;
//margin-left: 80px;
}
}
link for reference
hope this helps
I am wondering what is the best way to achieve two background divs (blue and gray) with a container over the top of them (red):
http://s22.postimg.org/44kcq1cqp/screenshot_413.png
I would create two divs for the background colours and 100vh but how would I overlay a container on top so I can make the login area? I'm trying to achieve something like this design:
http://s22.postimg.org/584h1zxdt/screenshot_414.png
Thanks in advance!
here is how I would do that :)
https://fiddle.jshell.net/okjn0oca/
* {
margin: 0;
padding: 0;
}
.content{
width: 100vw;
height: 100vh;
}
.left{
position: absolute;
top: 0;
left: 0;
width: 40vw;
height: 100vh;
background-color: blue;
}
.right {
position: absolute;
right: 0;
top: 0;
height: 100vh;
width: 60vw;
background-color: green
}
.menu {
width: calc(100% - 30px);
height: 50px;
background-color: red;
margin: 15px auto;
}
.logo {
width: 60px;
height: 30px;
background-color: red;
margin: 15px;
}
.text{
position: absolute;
width: 30vw;
height: 100px;
left: 5vw;
top: 50%;
transform: translateY(-50%);
background-color: yellow;
}
<div class="content">
<div class="left">
<div class="logo">
</div>
<div class="text">
</div>
</div>
<div class="right">
<div class="menu">
</div>
</div>
</div>
You could use a 1px background image on the body:
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAFeCAYAAABEunUfAAAAG0lEQVR42mMUYPj/n3GUGCVGiVFilBglhgMBAK5H0KGRPNKKAAAAAElFTkSuQmCC) no-repeat;
background-size: 40% 100%;
Here's a Codepen with the example
With the background size you force the pixel to cover 40% of the width and 100% of the height.
The 1px background is generated with png-pixel.com.
Not sure if you have actually tried anything, but here's something you can try.
Assuming you only want to have split colors for the background, you don't have to use two divs for that. You can do that with gradient (don't forget vendor prefixes). Then it's just a matter of positioning the "overlay" div as you want.
.bg {
width: 100%;
height: 100vh;
position: relative;
background: linear-gradient(to right, rgba(0,56,199,1) 0%, rgba(0,56,199,1) 40%, rgba(74,74,74,1) 40%, rgba(74,74,74,1) 100%);
}
.overlay {
width: 60%;
height: 25%;
position: absolute;
top: 25%;
left: 10%;
background: white;
}
<div class="bg">
<div class="overlay"></div>
</div>
Use a single container.
<style>
.main
{
background:white;
}
.login
{
background:blue;
}
</style>
<div class="main">
<div class="col-md-5 no-margin">
leave it blank
</div>
<div class="col-md-7 no-margin login">
put your page contents here
</div>
</div>