hi guys i have two differents div with background image, as you see in the picture. They are symetrics. i achieved that with clip-path, but as know it's not well supported by all browsers, could you guys give me an alternative to achieve that to be more compatible. Your help would be appreciated. Thx!
body {
margin: 0;
/* background: red; */
padding: 100px 0;
}
.container_first {
clip-path: polygon(0 0, 100% 14%, 100% 90%, 0% 100%);
background-image: url(images/img12.jpg);
min-height: 500px;
width: 100%;
background-size: cover;
background-repeat: no-repeat;
}
.container_second {
margin-top: -54px;
clip-path: polygon(0% 10%, 100% 0, 100% 100%, 0 86%);
background-image: url(images/img22.jpg);
min-height: 500px;
width: 100%;
background-size: cover;
background-repeat: no-repeat;
}
Use skew transformation:
.first,
.second {
height:300px;
transform-origin:left;
overflow:hidden;
}
.first {
transform:skewY(4deg);
}
.first > div {
height:100%;
background:url(https://picsum.photos/id/10/800/800) center/cover;
transform:skewY(-4deg);
transform-origin:left;
}
.second {
transform:skewY(-4deg);
}
.second > div {
height:100%;
background:url(https://picsum.photos/id/1045/800/800) center/cover;
transform:skewY(8deg); /* twice the skew here so you may need another skew for the content*/
transform-origin:right;
}
<div class="first">
<div></div>
</div>
<div class="second">
<div></div>
</div>
Related
I have to create image like this using CSS:-
If not possible then how can I use this with minimum image size? Like in below code I have used two images but this is also not working...
<div style="background:url('https://i.stack.imgur.com/veeS8.png') no-repeat top center, url('https://i.stack.imgur.com/2i7ed.png') repeat-y top 50px center; widhth:100%; height:800px; background-size:100%;">
</div>
Also possible with masking without using image. This is more flexible. You can control easily the slope by changing the variable.
.container {
--slope: 100px;
width: 100%;
height: 500px;
--mask: radial-gradient(farthest-side, #000 99%, transparent 100%) 50% 0 / 150% calc(var(--slope) * 2) no-repeat,
linear-gradient(#000, #000) 0 100% / 100% calc(100% - var(--slope)) no-repeat;
-webkit-mask: var(--mask);
mask: var(--mask);
background: linear-gradient(90deg, rgba(133, 132, 242, 1) 0%, rgba(35, 136, 253, 1) 50%, rgba(127, 237, 226, 1) 100%);
}
<div class='container'></div>
something like this would work:
div.cont:before {
content: '';
background-image: url(https://i.stack.imgur.com/2i7ed.png);
background-size: 100% auto;
position: absolute;
top: 44px;
left: 0;
right: 0;
bottom: 0;
}
<div class="cont" style="width: 100%;height:800px;background-image: url(https://i.stack.imgur.com/veeS8.png);background-size: 100% auto;background-repeat: no-repeat;position: relative;">
</div>
a trivial task using clip-path
.container {
height: 400px;
background: linear-gradient(90deg, rgba(133,132,242,1), rgba(35,136,253,1), rgba(127,237,226,1));
clip-path:ellipse(90% 100% at bottom); /* simply adjust the 90% */
}
<div class='container'></div>
To have the same curvature on resize use pixel value
.container {
height: 400px;
max-width:800px;
background: linear-gradient(90deg, rgba(133,132,242,1), rgba(35,136,253,1), rgba(127,237,226,1));
clip-path:ellipse(600px 100% at bottom);
}
<div class='container'></div>
.element {
width: 200px;
height: 200px;
border-radius: 100% 100% 0 0 / 20% 20% 0 0;
background-image: linear-gradient(to right, #8684F2 0%, #1BEEE3 100%);
}
You can use CSS Gradient to get this kind of result. You can also use some tools online to generate some gradients like this one:
https://cssgradient.io/
.container {
width: 500px;
height: 500px;
background: rgb(133,132,242);
background: linear-gradient(90deg, rgba(133,132,242,1) 0%, rgba(35,136,253,1) 50%, rgba(127,237,226,1) 100%);
}
<div class='container'>
</div>
This question already has an answer here:
symetric div with background image without clip-path
(1 answer)
Closed 2 years ago.
I'm trying to skew two div, similar to this:
Desired result
However, there is always a white line in between. I tested with a negative top margin but it doesn't work in responsive.
My result
with this code:
...
<div class="img-box"></div>
<div class="map-box"></div>
<footer>...</footer>
...
.img-box {
background: url("https://via.placeholder.com/2560x2000/0000000") no-repeat;
background-size: cover;
background-position: center center;
position: relative;
min-height: 100vh;
clip-path: polygon(0 0, 100% 10%, 100% 90%, 0 100%);
}
.map-box {
background: url("https://via.placeholder.com/2560x600/DDDDDD") no-repeat;
background-size: cover;
background-position: center center;
overflow: hidden;
position: relative;
height: 600px;
display-block;
}
footer{
height:100px;
background-color: #4D4E4C;
}
All you gotta do is add transform: translateY(10%); and z-index: 999; in your .img-box class, and it should work, let me know if it doesn't !
By the way, z-index doesn't strictly gotta be 999, I put the highest number just in case that something wont get over it later on if you decide to add more things to your code, you can put z-index: 1;, it will also work, or any number higher then 0 really :)
Just replace your css with this one :
.img-box {
background: url("https://via.placeholder.com/2560x2000/0000000") no-repeat;
background-size: cover;
background-position: center center;
position: relative;
min-height: 100vh;
transform: translateY(10%);
z-index: 999;
clip-path: polygon(0 0, 100% 10%, 100% 90%, 0 100%);
}
.map-box {
background: url("https://via.placeholder.com/2560x600/DDDDDD") no-repeat;
background-size: cover;
background-position: center center;
overflow: hidden;
position: relative;
height: 600px;
display-block;
}
footer{
height:100px;
background-color: #4D4E4C;
}
There's a lot of questions similar to this but they're for edges or have answers incompatible with some browsers. I'd thought of using a gradient image for the background but can achieve the same effect using a background gradient and I'd guess this may be easier to implement with minimal code.
I currently have this, which has flat edges;
.top {
min-width: 100%;
min-height: 400px;
background: linear-gradient(45deg, #FF0000, #00FF00);
}
.main {
min-width: 100%;
min-height: 600px;
background: #0000FF;
}
<div class="top"></div>
<div class="main"></div>
It uses minimal code but I'd be aiming for an angled edge either on the bottom of one and on the top of the other or just the bottom of the top one so that the DIVs match up.
I'd be aiming for something like this…
Of course I could rotate the DIV but then there's overflow. I want something clean so that both DIVs match up. Something using clip-path: polygon could work but I can't figure out the angles or implementation. Any ideas or resources for where to start would be apprecited.
UPDATE
I've figured out how to angle both so that they match up but the DIVs need to be touching for it to look proper.
.top {
min-width: 100%;
min-height: 400px;
background: linear-gradient(45deg, #FF0000, #00FF00);
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 80%);
}
.main {
min-width: 100%;
min-height: 600px;
background: #0000FF;
clip-path: polygon(0 0, 100% 20%, 100% 100%, 0 100%);
}
<div class="top"></div>
<div class="main"></div>
UPDATE 1
Would this work? I added position: relative; and top: -150px; to move it up.
.top {
min-width: 100%;
min-height: 400px;
background: linear-gradient(45deg, #FF0000, #00FF00);
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 80%);
}
.main {
min-width: 100%;
min-height: 600px;
background: #0000FF;
clip-path: polygon(0 0, 100% 20%, 100% 100%, 0 100%);
position: relative;
top: -120px;
}
<div class="top"></div>
<div class="main"></div>
Please help me to solve this issue, image not working z-index when div on clip-path. how i z-index to image easily thanks
Please check my code :-
.mymap {
background-image: url("https://images.pexels.com/photos/257360/pexels-photo-257360.jpeg?auto=compress&cs=tinysrgb&h=350");
background-repeat: no-repeat;
-webkit-clip-path: polygon(100% 0, 100% 80%, 0 80%, 0 23%);
clip-path: polygon(100% 0, 100% 80%, 0 80%, 0 23%);
}
.mymap {
height: 220px;
}
.men img {
width: 20%;
}
.men img {
z-index: 999;
position: relative;
}
<div class="mymap">
<div class="men">
<img src="https://i.pinimg.com/originals/1c/01/27/1c0127d19cdd75efb5a3eca4384658d5.png">
</div>
</div>
Here is the codepen link :- https://codepen.io/anon/pen/JaQoOX
Please check and tell me how to fix this.
You need to to wrap .mymap and .men class into parent container and set position:relative to .container class and position:absolute to image.
.container{
position:relative;
}
.mymap {
background-image: url("https://images.pexels.com/photos/257360/pexels-photo-257360.jpeg?auto=compress&cs=tinysrgb&h=350");
background-repeat: no-repeat;
-webkit-clip-path: polygon(100% 0, 100% 80%, 0 80%, 0 23%);
clip-path: polygon(100% 0, 100% 80%, 0 80%, 0 23%);
}
.mymap {
height: 220px;
}
.men img {
width: 20%;
}
.men img {
z-index: 999;
position: absolute;
top:0;
}
<div class="container">
<div class="mymap"></div>
<div class="men">
<img src="https://i.pinimg.com/originals/1c/01/27/1c0127d19cdd75efb5a3eca4384658d5.png">
</div>
</div>
This question already has answers here:
turning a div into transparent to see through two containers
(4 answers)
Closed 6 years ago.
Is there any way to have a div with a background-color that takes up 100% width and a transparent box inside it that shows the original background?
Solution 1: Clip-path
Clip path can be quite useful, as it keeps the code clean and simple. However, it does not have great support (yet) in browsers, and should hence only be used in test environments.
html {
background: url("http://butlers-web.co.uk/Content/Images/BWLOGO.png") 100% 100%;
}
div {
height: 300px;
width: 100%;
background: tomato;
position: relative;
-webkit-clip-path: polygon(0% 0%, 0% 100%, 100% 100%, 100% 0, 50% 0, 50% 20%, 80% 20%, 80% 80%, 20% 80%, 20% 20%, 50% 20%, 50% 0);
}
<div>
</div>
Solution 2: Box shadow Trick
The box shadow trick uses a pseudo element and overflow:hidden; to create the box shadow/colouring of the element.
html {
background: url("http://butlers-web.co.uk/Content/Images/BWLOGO.png") 100% 100%;
}
div {
height: 300px;
width: 100%;
overflow:hidden;
position: relative;
}
div:before{
content:"";
position:absolute;
top:20%;width:60%;height:60%;left:20%;
box-shadow:0 0 0 999px tomato;
}
<div></div>
Solution 3: Gradients
You could use multiple gradient background, however this may or may not be suitable as gradients don't always turn out rendered very nicely:
html {
background: url("http://butlers-web.co.uk/Content/Images/BWLOGO.png") 100% 100%;
}
div {
position: relative;
height: 300px;
width: 100%;
background: linear-gradient(tomato, tomato), linear-gradient(tomato, tomato), linear-gradient(tomato, tomato), linear-gradient(tomato, tomato);
background-size: 100% 20%, 20% 100%, 100% 20%, 20% 100%;
background-position: left bottom, right bottom, left top, left top;
background-repeat: no-repeat;
}
<div></div>
Solution 4: Borders
Whilst this may or may not be suitable for you, there is still a chance that it may help, so will post here anyway:
html {
background: url("http://butlers-web.co.uk/Content/Images/BWLOGO.png") 100% 100%;
}
div {
position: relative;
height: 300px;
width: 100%;
box-sizing: border-box;
border-left: 20vw solid tomato;
border-right: 20vw solid tomato;
border-top: 50px solid tomato;
border-bottom: 50px solid tomato;
}
<div></div>
Solution 5: Background attachment
I have recently come across the background-attachment property, so am still coming to grips with it. However, if you wished the background to appear behind you may be able to alter the below snippet to your needs:
body {
background: url('http://butlers-web.co.uk/Content/Images/BWLOGO.png');
background-attachment: fixed;
}
.wrapper {
width: 100%;
height: 300px;
background: tomato;
position: relative;
}
.inner {
width: 80%;
height: 80%;
background: url('http://butlers-web.co.uk/Content/Images/BWLOGO.png');
background-attachment: fixed;
position: absolute;
top: 10%;
left: 10%;
box-sizing:border-box;
border:2px solid black;
}
<div class="wrapper">
<div class="inner"></div>
</div>
You're going to need two div for that. A parent, with the red background, then the inner div.
give the inner div margin: 10px auto; as a start.