How to create a Cross Curved Box using div

Question

I want to create a box like this:

It's not looking like that curved. I tried but don't know how to make it. Please help me with some solutions.

.test {
  width: 300px;
  height: 50px;
  background-color: #EFB046;
  border-radius: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

<div class="test"></div>

Some help here https://stackoverflow.com/questions/59285321/inverse-curve-on-side-of-button — Adam, Dec 12 '22 at 14:26
Please provide HTML and CSS for questions with those tags, and not template code. — isherwood, Dec 12 '22 at 15:08

score 4 · Accepted Answer · answered Dec 12 '22 at 15:05

4

You can use gradient like below:

.box {
  --r: 40px; /* control the curvature*/

  --g:  #0000 98%,#EFB046; /* the color here */
  width: 250px;
  height: 80px;
  background:
    radial-gradient(var(--r) 100% at var(--r) 0   ,var(--g)) calc(-1*var(--r)) 0,
    radial-gradient(var(--r) 100% at var(--r) 100%,var(--g)) calc(-1*var(--r)) 100%;
  background-size: 100% 50%;
  background-repeat: repeat-x;
}


body {
  background: #000;
}

<div class="box"></div>

answered Dec 12 '22 at 15:05

Temani Afif

245,468
26
309
415

Not bad, but the interior box should have a different color. That could probably be achieved with a pseudo-element mask. – isherwood Dec 12 '22 at 15:11
@isherwood you can add a third gradient: https://jsfiddle.net/wbagyh9c/ – Temani Afif Dec 12 '22 at 15:14
I'm not sure why you're telling me down here instead of adding it to your answer. Your answer is incomplete at this point. – isherwood Dec 12 '22 at 15:53

score 1 · Answer 2 · answered Dec 12 '22 at 15:05

The trick is used ::before and ::after. In my code you can add border-radius in the CSS.

.pointed {
    position: relative;
    width:200px;
    height:40px;
    margin-left:40px;
    color:#FFFFFF;
    background-color:#c08457;
    text-align:center;
    line-height:40px;
}

.pointed:before {
    content:"";
    position: absolute;
    right: 100%;
    top:0px;
    width:0px;
    height:0px;
    border-top:20px solid transparent;
    border-right:40px solid #8d4e24;
    border-bottom:20px solid transparent;
}

.pointed:after {
    content:"";
    position: absolute;
    left: 100%;
    top:0px;
    width:0px;
    height:0px;
    border-top:20px solid transparent;
    border-left:40px solid #8d4e24;
    border-bottom:20px solid transparent;
}

<div class="pointed"> Text Content </div>

I know, that's why i said "you can add border-radius" for him to explore — wildanmaula, Dec 12 '22 at 15:14

score -1 · Answer 3 · answered Dec 12 '22 at 15:21

This question here details what you are requesting

Please Read it and its various answers.

In short it looks like there are 2 approaches.

One is to create 4 elements to block out the content of the main element, the downside to this approach is you will not be able to see any content underneath it incase there is any

The second would be to create an SVG to put in a path element. This would allow you to create the cutout you are looking for. an example could look like as such

Shown below are the HTML and CSS for the 2 possible solutions. Note the path was drawn poorly using a free SVG editor but gives the general idea of what can be done

HTML

   <div id="four-element">
      <p class="SpanText">Hello World</p>
      <div class="top left"></div>
      <div class="top right"></div>
      <div class="bottom left"></div>
      <div class="bottom right"></div>
  </div>
  <div id="svg">
    <svg width="100%" height="270px" \>
      <path d="M 52 20 C 53 75 10 135 0 135 C 10 135 55 142 57 272 L 268 270 C 269 180 267 163 304 145 C 266 134 246 62 245 19 L 52 20 Z" fill="blue"/>
      <text x="145" y="145" text-anchor="middle" alignment-baseline="middle">
        Hello World
      </text>
    </svg>
  </div>

CSS

#four-element {
    margin: 40px;
    height: 100px;
    width: 100px;
    background-color: #004C80;
    position: relative;
    overflow: hidden;
}

#four-element div {
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 100%;
    background-color: #FFFFFF;
}
.SpanText{
    position: absolute;
    top: 25%;
    left: 25%;
    
} 
.top { top: -10px; }
.bottom { bottom: -10px; }
.left { left: -10px; }
.right { right: -10px; }

If this question is a duplicate it should be flagged as such. — isherwood, Dec 12 '22 at 15:55

How to create a Cross Curved Box using div

3 Answers3