I want to create input text and submit box right inside curve. I tried some css but its not working

Question

I search but not received similar code; I'm facing problems in making inside curve borders:

input[type="text"] {
  border: none;
  background-color: #fff;
  padding: 10px 15px;
  border-radius: 5px;
  outline: none;
}

input[type="submit"] {
  border: 1px solid #9efffc;
  background-color: transparent;
  padding: 10px 15px;
  border-radius: 5px;
  outline: none;
  color: #9efffc;
}

<form action="">
  <label for="">Join VistaVerse</label>
  <input type="text" name="" id="" placeholder="Email Address">
  <input type="submit" value="SIGN UP">
</form>

It should look like this:

You could remove the default input styles and create the container, which you could style however you want. The unstyled input can then be placed inside the custom container. — ViktorG, Jul 05 '22 at 11:45
I guess you might need to apply [CSS `clip-path`.](https://hacks.mozilla.org/2017/06/css-shapes-clipping-and-masking/) somehow. Did you empty the `for` and `id` attributes for demonstration only, or do you intent to leave them empty. That would be invalid HTML, and your input would be missing an explanation label like “Email Address” or “Enter Email Address to Join VistaVerse”. A placeholder does not replace a label (: — Andy, Jul 05 '22 at 12:05
See also here: https://stackoverflow.com/questions/31854185/how-to-add-border-in-my-clip-path-polygon-css-style — Andy, Jul 05 '22 at 12:08

score 2 · Answer 1 · edited Jul 05 '22 at 13:06

It's feasible using clip-path: path(…), but unfortunately it requires to work with fixed sizes (no responsive).

See the Illustrated Guide to the SVG path Syntax for how to produce the shape you want. In this example we’ll need an Arch and Lines.

Because a clipped element cannot have a border, we use a ::before pseudo-element to cover up the inside of the button with a slightly smaller shape.

See How to add border in my clip-path: polygon(); CSS style for other possible techniques to outline a shape.

Also provide some extra style for the focus state, to not exclude users with disabilities or keyboard fans.

fieldset {
   background: #212121;
   border: 0;
   padding: 1rem;
   width: fit-content;
   display: flex;
   gap: 15px;
}

fieldset > * {
   box-sizing: border-box;
   height: 50px;
   padding: 0 1rem;
   font: 1rem system-ui;
}

fieldset > *:focus {
  outline: none;
}

input {
   min-width: 300px;
   clip-path: path('M 300 0 A 25 30 0 0 0 300 50 L 0 50 L 0 0')
}

input:focus {
  background: cyan;
  color: #212121;
}

button {
   position: relative;
   width: 215px;
   margin-left: -25px;
   cursor: pointer;
   border: 0;
   color: #fff;
   background: currentColor;
   clip-path: path('M 25 0 A 25 30 0 0 0 25 50 L 185 50 L 215 25 L 185 0')   
}

button:focus {
  color: cyan;
}

button span {
   position: absolute;
   z-index: 2;
   inset: 0;
   line-height: 50px;
}

button::before {
   content: "";
   position: absolute;
   z-index: 1;
   pointer-events: none;
   display: block;
   inset: 0;
   background: #212121;
   clip-path: path('M 25 1 A 24 30 0 0 0 25 49 L 185 49 L 214 25 L 185 1 z')   
   
}

<form>
   <fieldset>
      <input type="text" aria-label="insert your email" placeholder="Email Address">
      <button type="submit"><span>Sign up</span></button>
   </fieldset>
</form>

Please don’t forget to provide an accessible label for the input, to not give a bad example. — Andy, Jul 05 '22 at 12:18
There are no comma allowed in the path, btw (: Apparently Chrome is forgiving about this, but at least Firefox is not. — Andy, Jul 05 '22 at 12:27

I want to create input text and submit box right inside curve. I tried some css but its not working

1 Answers1