Add semi circle curve for a div at left and right using background color - CSS

Question

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>

Rana · Accepted Answer · 2021-10-23T17:07:12.583

1

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>

edited Oct 23 '21 at 17:07

answered Oct 23 '21 at 14:19

Rana

2,500
2
7
28

I tried your solution but was not able to apply background as transparent for pseudo-classes before and after when we have a background as an image please check this fiddle https://jsfiddle.net/j50uoLea/1/ – 06011991 Oct 23 '21 at 16:24
@06011991 your `card` class already has `opacity` which makes image as hidden behind it and also using `background: transparent` instead of `background: white` will make no sense because of card opacity . Provide an image of what behavior you wanted to achieve – Rana Oct 23 '21 at 16:30
Sure this is actual requirement I've please check this screen https://prnt.sc/1x6k2lh – 06011991 Oct 23 '21 at 16:33
@06011991 Well that can't be achieved using simple box and using `pseudo` elements . You have to either use `SVG` or `Canvas` to draw such shapes – Rana Oct 23 '21 at 16:39
I got you, please have a look at this fiddle https://jsfiddle.net/j50uoLea/1/ I'm able to get it left side but not on the right side. Any suggestions, please – 06011991 Oct 23 '21 at 16:41
I'm sorry I was not referring to the position, I was referring to get the semi-circle at the right side of the card – 06011991 Oct 23 '21 at 16:46
Well both the semi-circles on on respective side one on left-side and one is right-side @06011991 . What you wanted to achieve – Rana Oct 23 '21 at 16:48
I'm sorry I had shared you the wrong fiddle URL please refer this https://jsfiddle.net/j50uoLea/2/ – 06011991 Oct 23 '21 at 16:50
Have updated the answer with your code . See if it works @06011991 – Rana Oct 23 '21 at 17:07
If you find this answer or any other helpful you can upvote ( upvote can be multiple, answers that helped you ) it and can mark it as accepted @06011991 – Rana Oct 23 '21 at 17:21

score 0 · Answer 2 · answered Oct 23 '21 at 14:22

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>

score 0 · Answer 3 · answered Oct 23 '21 at 14:24

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>

How we make this white color as transparent when we have a background as an image Please check this fiddle https://jsfiddle.net/j50uoLea/ — 06011991, Oct 23 '21 at 16:20

Add semi circle curve for a div at left and right using background color - CSS

3 Answers3

Linked

Related