Similair question can be found here:
CSS: How to fit an image in a circle where bottom is clipped but top pops out?
However, I would like to have the red outline replaced by an image, e.g.:
I tried among others :before and :after psuedo tags but did not find the soluition. Which direction I should look to achieve this?
You can use multiple background like this:
.box {
width:200px;
height:210px;
border-radius: 0 0 50% 50%/0 0 70% 70%;
background:
url(https://i.stack.imgur.com/bdZeE.png) center/cover,
url(https://i.stack.imgur.com/i7iHM.png) 0 180%/100% auto no-repeat;
position:relative;
}
.box:after {
content:"";
position:absolute;
z-index:1;
bottom:0;
top:50%;
left:0;
right:0;
background:url(https://i.stack.imgur.com/i7iHM.png) 0 90%/100% auto no-repeat;
}
<div class="box">
</div>
You can also control the image inside using CSS variable:
.box {
width:200px;
height:210px;
border-radius: 0 0 50% 50%/0 0 70% 70%;
background:
var(--image) center/cover,
url(https://i.stack.imgur.com/i7iHM.png) 0 180%/100% auto no-repeat;
position:relative;
display:inline-block;
}
.box:after {
content:"";
position:absolute;
z-index:1;
bottom:0;
top:50%;
left:0;
right:0;
background:url(https://i.stack.imgur.com/i7iHM.png) 0 90%/100% auto no-repeat;
}
<div class="box" style="--image:url(https://i.stack.imgur.com/bdZeE.png)">
</div>
<div class="box" style="--image:url(https://i.stack.imgur.com/7A8fP.png)">
</div>
Related
I want to create this shape with HTML and CSS.
One gradient and one mask can do it:
.box {
width:300px;
height:300px;
display:inline-flex;
background:conic-gradient(#f5f6fa 90deg,#2b4170 0 180deg,#8292a2 0 270deg,#d5503d 0);
}
.box::before {
content:"";
width:50%;
height:50%;
margin:auto;
background:inherit;
border-radius:50%;
transform:rotate(-90deg);
-webkit-mask: radial-gradient(50% 50%,#fff 98%,#0000) -75px -75px;
}
<div class="box"></div>
I'm working on a website and I need to cut off the top left corner of the main body.
After that I want to apply a shadow on the main body. This shadow should not go around the original box it should follow the main body with the new cut off corner - I used drop-shadow for this.
I tried using gradient background but no matter what I try my header is either overlapping the main body or the shadows don't work
My current attempt is this: https://codepen.io/Sophvy/pen/MWgMZzG
HTML:
<div id ="main1">
<div id ="wrap"></div>
<header>
</header>
<main>
</main>
</div>
CSS:
#main1 {
height:500px;
width:500px;
position:relative;
}
#wrap {
width:500px;
height:500px;
background: linear-gradient(135deg, transparent 70px,green 0);
filter: drop-shadow(0px 0px 10px blue);
position:absolute;
}
header {
height:55px;
max-width:100%;
background-color:#eee;
position: relative;
}
My Issue here is that the header doesn't get cut off so its just overlapping.
I tried using z-index but couldn't get it to work even with position:absolute / relative on each element. I looked at a lot of different ideas but I haven't found any that handle the same problem that I'm having with my header.
What do I need to change to cut off the corner of the main body and the header, and then afterwards get a working shadow?
EDIT: my solution
HTML:
<div id="background">
<div id ="main1">
<div id ="wrap">
<header>
header
</header>
<main>
main
</main>
</div>
</div>
</div>
CSS:
#background {
height:500px;
width:600px;
padding-top: 5px;
background-color:#bbb;
padding-bottom: 5px;
}
#main1 {
margin: 10px auto;
width: 90%;
height:400px;
text-align:right;
filter: drop-shadow(0px 0px 10px blue);
}
#wrap {
width:500px;
height:500px;
background: linear-gradient(135deg, transparent 70px,green 0);
clip-path: polygon(25% 0, 100% 0, 100% 100%, 0 100%, 0 25%);
position:absolute;
}
header {
height:55px;
max-width:100%;
background-color:#eee;
position: relative;
}
You where very close!
If you use a clip-path you can cut both the header and the main part of the box.
When you then set the drop-shadow filter on the main element you should get the desired style.
#main1 {
height:500px;
width:500px;
filter: drop-shadow(0px 0px 10px blue);
}
#wrap {
width:500px;
height:500px;
background: linear-gradient(135deg, transparent 70px,green 0);
clip-path: polygon(25% 0, 100% 0, 100% 100%, 0 100%, 0 25%);
position:absolute;
}
header {
height:55px;
max-width:100%;
background-color:#eee;
position: relative;
}
<div id ="main1">
<div id ="wrap">
<header>
</header>
<main>
</main>
</div>
</div>
I'm building a hero section for a webpage that has a particular shape, at the moment I'm just using an image as an overlay for the actual section background, but I'm looking to reduce the amount of requests I make and would like to know if the following shape can be done using CSS:
So the black part is where the actual image goes, while the white section is what I'm trying to build using CSS;
Here is an idea with one element and radial-gradient to approximate it
.box {
width: 400px;
height: 200px;
display:inline-block;
overflow:hidden;
position:relative;
}
.box:before,
.box:after{
content:"";
position:absolute;
top:0;
left:0;
right:50%;
bottom:0;
background:
radial-gradient(100% 116.3% at top right, transparent 99%,#fff 100%) top,
radial-gradient(100% 116.3% at bottom left, #fff 99%,transparent 100%) bottom;
background-size:100% 50%;
background-repeat:no-repeat;
}
.box:after {
right:0;
left:50%;
transform:scaleX(-1);
}
body {
background:linear-gradient(to right, purple, blue);
}
<div class="box">
</div>
You can then adjust left/right/bottom properties to control the overal shape by having some oveflow and overlap:
.box {
width: 400px;
height: 200px;
display:inline-block;
overflow:hidden;
position:relative;
}
.box:before,
.box:after{
content:"";
position:absolute;
top:0;
left:-2px;
right:40%;
bottom:-45%;
background:
radial-gradient(100% 116.3% at top right, transparent 99%,#fff 100%) top,
radial-gradient(100% 116.3% at bottom left, #fff 99%,transparent 100%) bottom;
background-size:100% 50%;
background-repeat:no-repeat;
}
.box:after {
right:-2px;
left:40%;
transform:scaleX(-1);
}
body {
background:linear-gradient(to right, purple, blue);
}
<div class="box">
</div>
Here is an idea using SVG to replace the radial-gradient:
.box {
height: 200px;
overflow:hidden;
position:relative;
}
.box:before,
.box:after{
content:"";
position:absolute;
top:0;
left:0;
right:50%;
bottom:0;
background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" preserveAspectRatio="none"><path fill="white" d="M64 64 C56 30 8 48 0 0 L0 64 Z"/></svg>');
background-size:100% 100%;
}
.box:after {
right:0;
left:50%;
transform:scaleX(-1);
}
body {
background:linear-gradient(to right, purple, blue);
}
<div class="box">
</div>
Here is a good online tool to edit the SVG: http://jxnblk.com/paths/. Simply append the path to the url at the end and edit it;
http://jxnblk.com/paths/?d=M64 64 C56 30 8 48 0 0 L0 64 Z
having a problem here. I have a got my skewed div perfect but now I want the image to fit in it without tiling so if anyone can help that would be awesome.
I'm going for this:
And so far I have this:
HTML
<div class="box"></div>
CSS
.box {
position:relative;
width:100%;
height:500px;
background: url(../images/clouds.jpeg);
background-size:contain;
padding:10px;
margin-bottom:100px;
}
.box:after {
position:absolute;
content:'';
width:100%;
height:100%;
top:0;
left:0;
right:0;
background:inherit;
background-size:contain;
transform-origin: top left;
transform:skewY(10deg);
z-index: -1;
}
You should use background-size: cover if you want the img to fill the entire container, and then use background-repeat: no-repeatto have one image.
Something like that should work:
.box {
position:relative;
width:100%;
height:500px;
background: url(../images/clouds.jpeg);
background-size:cover;
background-repeat: no-repeat;
padding:10px;
margin-bottom:100px;
}
That image is not skewed..
div{
display:inline-block;
margin:10px;
postion:relative;
width:100px;
height:100px;
background:cyan;
}
div.covered{
background:
linear-gradient(20deg,white,white,40px,transparent 40px,transparent),cyan;
}
<div>
normal
</div>
<div class="covered">
covered
</div>
Bottom-left part can be done by covering image with white color with tilted linear gradient.
I'm trying to make my image full screen while overflowing the div
pulled from here:
CSS - how to overflow from div to full width of screen
Except instead of using a color, I'm using an image..but I want it to be full screen also. Any ideas?
.main-header:after {
content: "";
position: absolute;
height: 100%;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 99vw;
background-size: cover;
background: url(header_bg.jpg) no-repeat center center; /* help */
z-index: -1;
}
Like this?
body{
margin:auto;
}
#for_real,#top{
width:100px;
height:100px;
border:solid;
z-index:100;
}
#for_real img{
position:fixed;
top:0px;
left:0px;
opacity:0.5;
width:100vw ;
height:100vh;
}
<div id='top'>
TOP DIV WITH NO IMAGE
</div>
<div id='for_real'>
DIV WITH IMAGE
<img src='https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcT-gpy8G_VpoocZD5L5tuNO_hO_BC9zXl32WCjaHcE-ICiWhL5O'>
</div>