What i need: a box with notched angle, a border around it and png image inside.
What i have: a box with notched angle made with linear-gradients, a border around it and png image over the border.
What i've tried: change z-indexes - zero result.
Any idea?
My code: https://codepen.io/drsg/pen/eYZEXNz
.item {
margin: 0 auto;
position: relative;
width: 340px;
height: 380px;
overflow: hidden;
background-image: linear-gradient(135deg, transparent 30px, orange 30px);
z-index: 999;
}
.item::before {
content: "";
position: absolute;
left: 10px;
top: 10px;
display: block;
width: 320px;
height: 360px;
background-image: linear-gradient(135deg, transparent 30px, black 30px);
overflow: hidden;
}
.item__image {
position: absolute;
bottom: -90px;
left: -105px;
width: 370px;
height: 360px;
z-index: 1;
}
.item__image img {
width: 100%;
height: 100%;
}
body {
background-color: grey;
}
Using clip path you can get the same effect.
.box {
position: relative;
width: 360px;
height: 360px;
padding: 10px;
background-color: orange;
clip-path: polygon(24% 0, 100% 0, 100% 100%, 0 100%, 0 23%);
}
.box::before {
display: block;
background-color: black;
content: 'hello';
width: 100%;
height: 100%;
clip-path: polygon(24% 0, 100% 0, 100% 100%, 0 100%, 0 23%);
}
.box img {
width: 300px;
position: absolute;
z-index: 1;
bottom: -35px;
left: -60px;
}
<div class="box">
<img src="https://pngicon.ru/file/uploads/vinni-pukh-v-png.png" />
</div>
Can you try with this css:
.item {
margin: 0 auto;
position: relative;
width: 340px;
height: 380px;
overflow: hidden;
background-image: linear-gradient(135deg, transparent 30px, orange 30px);
z-index: 999;
}
.item::before {
content: "";
position: absolute;
left: 10px;
top: 10px;
display: block;
width: 320px;
height: 360px;
background-image: linear-gradient(135deg, transparent 30px, black 30px);
z-index: 1;
}
.item__image {
position: relative;
left: 10px;
top: 10px;
width: 320px;
height: 360px;
background: transparent;
overflow: hidden;
}
.item__image img {
width: 100%;
height: 100%;
position: absolute;
z-index: 1;
bottom: -80px;
left: -80px;
}
body {
background-color: grey;
}
Related
I would like to curve the bottom side of this rectangle div/background with CSS, so the result is something like this:
Does someone have an idea perhaps how it could be achieved?
.curved {
margin: 0 auto;
height: 400px;
background: lightblue;
border-radius:0 0 200px 200px;
}
<div class="container">
<div class="curved"></div>
</div>
Simply use border-radius and rely on some overflow. You can also consider pseudo element to avoid extra markup:
.container {
margin: 0 auto;
width: 500px;
height: 200px;
background: lightblue;
position: relative;
overflow: hidden;
}
.container:after {
content: "";
position: absolute;
height: 80px;
left: -10%;
right: -10%;
border-radius: 50%;
bottom: -25px;
background: #fff;
}
<div class="container">
</div>
You can also use radial-gradient if you want a transparent shape:
body {
background: pink;
}
.container {
margin: 0 auto;
width: 500px;
height: 200px;
background: radial-gradient(110% 50% at bottom, transparent 50%, lightblue 51%);
}
<div class="container">
</div>
And here is another way using clip-path
.container {
margin: 0 auto;
width: 500px;
height: 200px;
background-color: lightblue;
position: relative;
overflow: hidden;
}
.container:after {
content: "";
position: absolute;
bottom: 0;
right: -5%;
left: -5%;
height: 120px;
background: #fff;
-webkit-clip-path: ellipse(50% 60% at 50% 100%);
clip-path: ellipse(50% 60% at 50% 100%);
}
<div class="container">
</div>
You can also consider SVG:
.container {
margin: 0 auto;
width: 500px;
height: 200px;
background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' width='64' height='48' fill='lightblue'><path d='M0 0 L0 16 C16 6 48 6 64 16 L64 0 Z' /></svg>") top center/auto 700px no-repeat;
}
<div class="container">
</div>
Here is an example if you want also to add border around your shape:
.container {
margin: 0 auto;
width: 500px;
height: 200px;
border: 2px solid #000;
border-bottom: 0;
background: lightblue;
position: relative;
overflow: hidden;
}
.container:after {
content: "";
position: absolute;
height: 80px;
left: -10%;
right: -10%;
border-radius: 50%;
bottom: -62px;
background: #fff;
z-index: 2;
}
.container:before {
content: "";
position: absolute;
height: 82px;
left: -10%;
right: -10%;
border-radius: 50%;
bottom: -62px;
background: #000;
z-index: 1;
}
<div class="container">
</div>
If you want to have an image or gradient as background with the transparency, use mask-image:
body {
background: pink;
}
.container {
margin: 0 auto;
width: 500px;
height: 200px;
-webkit-mask-image: radial-gradient(110% 50% at bottom, transparent 50%, #fff 51%);
mask-image: radial-gradient(110% 50% at bottom, transparent 50%, #fff 51%);
background: linear-gradient(45deg,red,yellow,blue);
}
<div class="container">
</div>
Check this. I created this with :after pseudo element. It can be helpful if the background is solid color.
.curved {
margin: 0 auto;
width: 300px;
height: 300px;
background: lightblue;
position: relative;
}
.curved:after{
background: white;
position: absolute;
content: "";
left:0;
right:0;
bottom: -25px;
height: 50px;
border-radius: 50% 50% 0 0;
}
<div class="container">
<div class="curved"></div>
</div>
I want to do this:
So far I got this:
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
background: #red;
z-index: 10000;
height: 10px;
overflow: visible;
}
.header:after {
content: '';
position: relative;
top: 100%;
display: block;
margin: 0 auto;
background: red;
width: 50px;
height: 25px;
border-radius: 10px 10px 50px 50px;
}
<div class="header"></div>
Codepen.
I can't get the top radius to go outwards the half circle like in the image.
How to do this with CSS?
You cannot make a negative radius on a border.
There is the possibility to make an SVG path or radial gradient... I made a new div as circle and radial gradient on pseudo-elements. It's not perfect, but it will possibly show you the direction to solution :)
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
background: red;
z-index: 10000;
height: 10px;
overflow: visible;
}
.header-circ {
position: relative;
top: 100%;
display: block;
margin: 0 auto;
background: red;
width: 500px;
height: 250px;
border-radius: 10px 10px 250px 250px;
}
.header-circ::before, .header-circ::after {
content: "";
position: absolute;
width: 100px;
height: 100px;
z-index: -1;
}
.header-circ::before {
left:-94px;
background: radial-gradient(circle at bottom left, white 0%,white 75%,red 75%);
}
.header-circ::after {
right:-94px;
background: radial-gradient(circle at bottom right, white 0%,white 75%,red 75%);
}
<div class="header"></div>
<div class="header-circ"></div>
This question already has answers here:
CSS Cut out circle from a rectangular shape
(3 answers)
Closed 1 year ago.
Can anyone help me with how to get the style like in the image attached below using background colour for a div? I tried adding using pseudo-classes before and after but doesn't seem to be coming through.
.card {
height: 190px;
background: #070B32;
width: 360px;
position: relative;
}
.card:before {
background: #070B32;
position: absolute;
content: "";
left: 0;
height: 50px;
border-radius: 50% 50% 0 0;
}
.card:after {
background: #070B32;
position: absolute;
content: "";
right: 0;
height: 50px;
border-radius: 50% 50% 0 0;
}
<div class="card">
</div>
Use width top values too to have semi-circles with a change in color
.card {
height: 190px;
background: #070B32;
width: 360px;
position: relative;
}
.card:before {
background: white;
position: absolute;
content: "";
left: 0;
top:35%;
width: 25px;
height: 50px;
border-radius: 0 150px 150px 0;
}
.card:after {
background: white;
position: absolute;
content: "";
right: 0;
top:35%;
width: 25px;
height: 50px;
border-radius: 150px 0 0 150px;
}
<div class="card">
</div>
Update:
div {
height: 150px;
margin: 5em 2em;
background: radial-gradient(circle at left center, transparent, transparent 30px, #070B32 30px, transparent), radial-gradient(circle at right center, transparent, transparent 30px, #070B32 30px, transparent);
border-radius: 8px;
position: relative;
width: 360px;
margin: auto;
}
body {
background-image: url(http://www.fillmurray.com/1000/1000);
background-size: cover;
}
<div>
</div>
you should use width: 50px, background-color: white;
and responsive vertical alignment:
top: 50%; transform: translateY(-50%);
.card {
height: 190px;
background: #070B32;
width: 360px;
position: relative;
}
.card:before {
background: #ffffff;
position: absolute;
content: "";
left: -25px;
top: 50%;
transform: translateY(-50%);
height: 50px;
width: 50px;
border-radius: 50%;
}
.card:after {
background: #ffffff;
position: absolute;
content: "";
right: -25px;
top: 50%;
transform: translateY(-50%);
height: 50px;
width: 50px;
border-radius: 50%;
}
<div class="card">
</div>
Or just use a background.
.card {
--circle-color: #fff;
--circle-size: 50px;
background: radial-gradient(farthest-side circle, var(--circle-color) 97%, transparent) calc(100% + (var(--circle-size) / 2)) 50% / var(--circle-size) var(--circle-size),
radial-gradient(farthest-side circle, var(--circle-color) 97%, transparent) calc(var(--circle-size) / -2) 50% / var(--circle-size) var(--circle-size),
#070B32;
background-repeat: no-repeat;
height: 190px;
width: 360px;
}
<div class="card">
</div>
I would like to curve the bottom side of this rectangle div/background with CSS, so the result is something like this:
Does someone have an idea perhaps how it could be achieved?
.curved {
margin: 0 auto;
height: 400px;
background: lightblue;
border-radius:0 0 200px 200px;
}
<div class="container">
<div class="curved"></div>
</div>
Simply use border-radius and rely on some overflow. You can also consider pseudo element to avoid extra markup:
.container {
margin: 0 auto;
width: 500px;
height: 200px;
background: lightblue;
position: relative;
overflow: hidden;
}
.container:after {
content: "";
position: absolute;
height: 80px;
left: -10%;
right: -10%;
border-radius: 50%;
bottom: -25px;
background: #fff;
}
<div class="container">
</div>
You can also use radial-gradient if you want a transparent shape:
body {
background: pink;
}
.container {
margin: 0 auto;
width: 500px;
height: 200px;
background: radial-gradient(110% 50% at bottom, transparent 50%, lightblue 51%);
}
<div class="container">
</div>
And here is another way using clip-path
.container {
margin: 0 auto;
width: 500px;
height: 200px;
background-color: lightblue;
position: relative;
overflow: hidden;
}
.container:after {
content: "";
position: absolute;
bottom: 0;
right: -5%;
left: -5%;
height: 120px;
background: #fff;
-webkit-clip-path: ellipse(50% 60% at 50% 100%);
clip-path: ellipse(50% 60% at 50% 100%);
}
<div class="container">
</div>
You can also consider SVG:
.container {
margin: 0 auto;
width: 500px;
height: 200px;
background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' width='64' height='48' fill='lightblue'><path d='M0 0 L0 16 C16 6 48 6 64 16 L64 0 Z' /></svg>") top center/auto 700px no-repeat;
}
<div class="container">
</div>
Here is an example if you want also to add border around your shape:
.container {
margin: 0 auto;
width: 500px;
height: 200px;
border: 2px solid #000;
border-bottom: 0;
background: lightblue;
position: relative;
overflow: hidden;
}
.container:after {
content: "";
position: absolute;
height: 80px;
left: -10%;
right: -10%;
border-radius: 50%;
bottom: -62px;
background: #fff;
z-index: 2;
}
.container:before {
content: "";
position: absolute;
height: 82px;
left: -10%;
right: -10%;
border-radius: 50%;
bottom: -62px;
background: #000;
z-index: 1;
}
<div class="container">
</div>
If you want to have an image or gradient as background with the transparency, use mask-image:
body {
background: pink;
}
.container {
margin: 0 auto;
width: 500px;
height: 200px;
-webkit-mask-image: radial-gradient(110% 50% at bottom, transparent 50%, #fff 51%);
mask-image: radial-gradient(110% 50% at bottom, transparent 50%, #fff 51%);
background: linear-gradient(45deg,red,yellow,blue);
}
<div class="container">
</div>
Check this. I created this with :after pseudo element. It can be helpful if the background is solid color.
.curved {
margin: 0 auto;
width: 300px;
height: 300px;
background: lightblue;
position: relative;
}
.curved:after{
background: white;
position: absolute;
content: "";
left:0;
right:0;
bottom: -25px;
height: 50px;
border-radius: 50% 50% 0 0;
}
<div class="container">
<div class="curved"></div>
</div>
I would like to curve the bottom side of this rectangle div/background with CSS, so the result is something like this:
Does someone have an idea perhaps how it could be achieved?
.curved {
margin: 0 auto;
height: 400px;
background: lightblue;
border-radius:0 0 200px 200px;
}
<div class="container">
<div class="curved"></div>
</div>
Simply use border-radius and rely on some overflow. You can also consider pseudo element to avoid extra markup:
.container {
margin: 0 auto;
width: 500px;
height: 200px;
background: lightblue;
position: relative;
overflow: hidden;
}
.container:after {
content: "";
position: absolute;
height: 80px;
left: -10%;
right: -10%;
border-radius: 50%;
bottom: -25px;
background: #fff;
}
<div class="container">
</div>
You can also use radial-gradient if you want a transparent shape:
body {
background: pink;
}
.container {
margin: 0 auto;
width: 500px;
height: 200px;
background: radial-gradient(110% 50% at bottom, transparent 50%, lightblue 51%);
}
<div class="container">
</div>
And here is another way using clip-path
.container {
margin: 0 auto;
width: 500px;
height: 200px;
background-color: lightblue;
position: relative;
overflow: hidden;
}
.container:after {
content: "";
position: absolute;
bottom: 0;
right: -5%;
left: -5%;
height: 120px;
background: #fff;
-webkit-clip-path: ellipse(50% 60% at 50% 100%);
clip-path: ellipse(50% 60% at 50% 100%);
}
<div class="container">
</div>
You can also consider SVG:
.container {
margin: 0 auto;
width: 500px;
height: 200px;
background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' width='64' height='48' fill='lightblue'><path d='M0 0 L0 16 C16 6 48 6 64 16 L64 0 Z' /></svg>") top center/auto 700px no-repeat;
}
<div class="container">
</div>
Here is an example if you want also to add border around your shape:
.container {
margin: 0 auto;
width: 500px;
height: 200px;
border: 2px solid #000;
border-bottom: 0;
background: lightblue;
position: relative;
overflow: hidden;
}
.container:after {
content: "";
position: absolute;
height: 80px;
left: -10%;
right: -10%;
border-radius: 50%;
bottom: -62px;
background: #fff;
z-index: 2;
}
.container:before {
content: "";
position: absolute;
height: 82px;
left: -10%;
right: -10%;
border-radius: 50%;
bottom: -62px;
background: #000;
z-index: 1;
}
<div class="container">
</div>
If you want to have an image or gradient as background with the transparency, use mask-image:
body {
background: pink;
}
.container {
margin: 0 auto;
width: 500px;
height: 200px;
-webkit-mask-image: radial-gradient(110% 50% at bottom, transparent 50%, #fff 51%);
mask-image: radial-gradient(110% 50% at bottom, transparent 50%, #fff 51%);
background: linear-gradient(45deg,red,yellow,blue);
}
<div class="container">
</div>
Check this. I created this with :after pseudo element. It can be helpful if the background is solid color.
.curved {
margin: 0 auto;
width: 300px;
height: 300px;
background: lightblue;
position: relative;
}
.curved:after{
background: white;
position: absolute;
content: "";
left:0;
right:0;
bottom: -25px;
height: 50px;
border-radius: 50% 50% 0 0;
}
<div class="container">
<div class="curved"></div>
</div>