0

I want to create a sort of badge-like box, used for team descriptions, but I can't seem to come up with any way of getting it done. I've got border-radius going for the top, but no idea how to lead up into the rest of it. This is my current code: https://jsfiddle.net/ubgbjbao/

(A little of my CSS): 

.wpsm_team_2_member_wrapper{
        border-top-left-radius: 50%;
        border-top-right-radius: 50%;
    }

This is somewhat I'm trying to achieve: https://i.maagic.pw/MagnifloriousDeityMash

Hemant
  • 1,961
  • 2
  • 17
  • 27
Migy Dgz
  • 1
  • You're probably looking for a trick like this, http://stackoverflow.com/questions/22421880/inverted-border-radius-possible – Danny Bullis Apr 25 '17 at 21:15

3 Answers3

0

If you want to go the easy route, create a png file that's just a white background with a drop shadow and/or border. It will be minimally slower but better than having to try to create the file with SVG which you may have to use if you want it purely html/css.

mcheah
  • 1,209
  • 11
  • 28
0

Look at this post. You'll have to get creative with your drop shadow though.

'Inverted' border-radius possible?

You could also try to implement this using Masking with SVG.

https://www.html5rocks.com/en/tutorials/masking/adobe/

Community
  • 1
  • 1
Danny Bullis
  • 3,043
  • 2
  • 29
  • 35
0

You can get a lot of mileage using absolute positioning of one element butted up to the edge of another. Here you can add a border radius (border-radius: 50% 50% 0px 0px;) and padding to the portrait to get that half-circle look.

The portrait you can pull upwards using a negative top value. The left is left: calc(50% - 95px); which means 50% of the containing width minus half it's own width and horizontal padding (150px/2 + 20px).

You'll have to make sure the containing element (.wpsm_team_2_member_wrapper) has position: relative. Add a top margin to .wpsm_team_2_member_wrapper_inner to move it down out of the way of the portrait.

Finally if you give the portrait a box shadow pointing up box-shadow: 0px -3px 5px 0px rgba(0,0,0,.2); you can kind of make it look like a continuous shadow.

Not sure if this is what you meant, but hopefully can get you going. Example here:

https://jsfiddle.net/ubgbjbao/2/

sfscs
  • 515
  • 4
  • 8