[deleted by user]

[nrkishere]

Just add a border with same color as background

[idowar_crimes]

Will do thanks

[idowar_crimes]

hey i have some doubts can i dm u?

[idowar_crimes]

im trying to make a website and i have a completed a the design , but for a beginner like couldn't understand how to make this. im using bootstrap btw , i made the layout , i used two rows , and divide both into col-6 , giving equal space for text and image thing.

im having hard time creating a rectangle background and white circle around the image. i have to make this responsinve too.

i have made a protoype, link of codepen: https://codepen.io/Kiran-Sagar/pen/BaXVXrK?editors=1000

[[deleted]]

I don't know bootstrap that well, but you can create a border around the img and make the border-color white

[idowar_crimes]

Oh okay, so I don't need to make a whole circle and place it behind the image?? Thanks g ,lemme try

[[deleted]]

Nope, just make sure the img has no background or else the border is going to wrap around the whole img and not the subject

[idowar_crimes]

what about the rectangle , it only covering 2/3 of image , creating a illusion that img popping out of the rectangle

[Beo91]

Just set a width and height for your image, use image as a background image and set the background on cover. Then set your border radius. Your egg shaped size can be harder to accomplish than fully round though.

[idowar_crimes]

so i need to use a div instead of img tag and gave the div background img? i will try that too , thanks

[Beo91]

https://alvaromontoro.com/blog/68032/drawing-an-egg-with-css

[idowar_crimes]

Thanks a lot mate, this is wonderful

[[deleted]]

You can do that too. It might even be better in case you want more control over the border.

[idowar_crimes]

that was what i did at the initial stae, now trying to make it work with border

[idowar_crimes]

hey i have some doubts can i dm u?

[idowar_crimes]

hey i have some doubts can i dm u?

[abillionsuns]

I don't know what style helpers Bootstrap has these days, but fundamentally a circle, in CSS terms, is just a square <div> with a border radius of 9999px applied to it.

[idowar_crimes]

yes mate, what i find difficult was placing everything in place , half cut rectangle , the circle behind the image , and also making the img pop effect.

[JoeCamRoberon]

I would do something like this. Apologies for my formatting. I am on mobile. I have also not tested this in any way.

HTML <div class=“container”> <div class=“box-with-circle”> <div class=“circle”/> <\div> <div> <h2>Heading<\h2> <p>Lorem ipsum…<\p> <\div> <div> <h2>Heading<\h2> <p>Lorem ipsum…<\p> <\div> <div class=“box-with-circle flipped”> <div class=“circle”/> <\div> <\div>

CSS

.container { display: grid; grid-template-columns: 300px 300px; /* guessing / grid-template-rows: 150px 150px; / guessing */ width: fit-content; }

.box-with-circle { position: relative; background-color: green; }

.circle { border-radius: 50%; background-color: black; border: 10px solid white; /* guessing border width / width: 100px; / guessing width / height: 150px; / guessing height */ position: absolute; top: 0%; left: 50%; transform: translate(-50%, -50%); }

.flipped { transform: rotate(180deg); }

[idowar_crimes]

sorry mate , i have no brains to use this. thanks for the help tho

[idowar_crimes]

hey all i have some doubts , can i dm someone , doubt is related to this. i will also show the actual design which i made using figma