Div with curved in sides

Question

I'm looking to create the below unique shape as a text container, but not sure if it's possible with a div. I've tried a few border-radius and positioning CSS hacks, and clearly none have worked. I want to be able to have a colored border, a background-image to fill it, and text to be able to go inside as a title. How might I go about creating this shape? Is CSS even the way to go? Or is SVG a better bet? Help?

shape

I've already seen these SO posts that are similar, but not quite what I'm looking for:

Rectangle with curved sides | How to create div with curve in css and html5?

I didn't intend for it to link, but to display the type of shape I wanted to create. — ticklishoctopus, Sep 06 '16 at 20:49
This question is overly broad! You're basically asking us to write the code for you. Please see: http://stackoverflow.com/help/dont-ask and http://stackoverflow.com/help/how-to-ask — chrisv, Sep 06 '16 at 20:52
I truly did not intend that at all. What I meant (but failed to articulate) is the direction I might take to create this shape--as it is fairly complicated. — ticklishoctopus, Sep 06 '16 at 20:54
take a look at my answer for a pure css way to accomplish this — Cruiser, Sep 06 '16 at 21:16

score 1 · Accepted Answer · answered Sep 06 '16 at 20:53

Use an SVG as your outer shape mask and put whatever you want in that mask. In this case, you can put a repeating circle BG inside the shape and apply the SVG as it's mask.

You can find full tutorials online for SVG masking by simply googling SVG Masking - or you can check this one out at: http://tutorials.jenkov.com/svg/mask.html

Side note: To avoid downvotes in the future, please include examples of what you have tried so that we have something to work with in helping you solve your programming concern.

Thank you to both. I will take a look at this particular tutorial, and see what I can't come up with. Thank you as well for your SO advice. This place tends to be brutal. — ticklishoctopus, Sep 06 '16 at 21:07

score 1 · Answer 2 · answered Sep 06 '16 at 20:55

You can use images as a border, but the shape you are trying to make would be difficult doing this. To use an image border you have to have a shape which is more square.

However you could use an svg as a background image and make it 100% of the div container.

#div
{
    width:100%;
    height: 100%;
    background: url("../../../images/test.svg") 0 0 no-repeat;
    background-size: 100% 100%;
}

You may not been the background-size. Try with and without to see the difference. Sometimes it helps with svgs, sometimes not.

If you need to constrain the size you have two options. Make this div a specific size or, make a fixed width div and put this div inside.

score 0 · Answer 3 · answered Sep 06 '16 at 21:13

I've created this for you with pure CSS, however, in production you'd need to adjust the z-index so the :before and :after pseudo elements don't block other content.

Here's a pen: http://codepen.io/Cruiser/pen/KgwOxv

Basically, we use some cool background tricks and the :before and :after with white borders and absolute positioning to get the shape to look like your image.

.bendy:before {
  content: "";
  position:absolute;
  background-color:white;
  width:53%;
  height:50%;
  top:-175px;
  left:436px;
  border-style: solid;
  border-color:white;
  border-bottom-color:blue;
  border-bottom-width:10px;
  border-radius: 40%;
}

The background is modified from: http://bennettfeely.com/gradients/, a great site for cool background tricks with CSS. Here's the gist--

background:
radial-gradient(
    magenta,
    magenta 40%,
    transparent 40%,
    transparent 100%
), floralwhite;

background-size:
    4em 4em;

background-blend-mode: multiply;
background-position:
    0 0,
    -33% -33%,
    -200% -200%;
 }

Div with curved in sides

3 Answers3