1

I want to make an input text field, like the one on https://www.tesla.com/en_gb/cybertruck/design#battery (it appears after clicking 'buy now') but I am unsure how to approach this.

I have tried adding border-radius but of course that only rounds the corners.

Below is my current code:

<style>
        body {
            background-color: black;
        }

        label {
            color: white;
        }

    input {
        width: 300px;
        height: 40px;
        border: solid white 1px;
        background: transparent;
        color: white;
        font-family: 'Consolas';
        font-size: 0.9em;
        font-weight: bold;
        padding: 10px 10px 10px 10px;
        transition: border 0.3s ease-in-out;
        box-sizing: border-box;
        outline-width: 0;
    border-radius: 10px 10px 10px 10px;
    border-style: none;
    border-width: 0 0 3px;
    padding: 3px 10px;
    }

    input:focus {
        border: solid white 3.5px;
    }
    </style>

<label>Test field</label>
<br>
<input type = "text">

I would like this to be responsive if possible, thanks in advance.

JoelEXE
  • 11
  • 1
  • Use your Browser's Developer Tools to Inspect their textboxes. They're using a wrapper `
    ` for each input, with `clip-path` on a `::before` pseudo-element for the corner.
     – Dai Jan 28 '20 at 22:32

2 Answers2

0

They are using clip-path and polygon to do this. See this page for details: https://css-tricks.com/notched-boxes/

Boeke
  • 1
  • This answer gives you a clip path example as well as an option using transform: https://stackoverflow.com/a/33100842/11831763 – Boeke Jan 28 '20 at 23:24
  • Thanks, I have managed to do that, but I am unable to add a border onto the clip path like on the website. – JoelEXE Jan 28 '20 at 23:32
  • It appears that you can't add a border to a clipped element but this answer has a workaround: https://stackoverflow.com/a/31854299/11831763. It would require giving it a fixed width and height, though... – Boeke Jan 29 '20 at 00:09
  • And here's a codepen doing the same thing: https://codepen.io/bennettfeely/pen/azJWWX/ – Boeke Jan 29 '20 at 00:10
0

As already mentioned, by looking at the source you can see that it's a clip path.

In particular the clip path is applied to a wrapper div as ::before pseudo element as opposed to on the input element. Here's a simple example using the exact same clip path on the website.

body,
html {
  padding: 0;
  margin: 0;
  background-color: #333;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.wrapper {
  width: 200px;
  height: 40px;
  position: relative;
  display: block;
}

.wrapper::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: blue;
  clip-path: polygon(0px 0px, 100% 0px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0px 100%, 0px 1.5px, 1.5px 1.5px, 1.5px calc(100% - 1.5px), calc(100% - 11.5px) calc(100% - 1.5px), calc(100% - 1.5px) calc(100% - 11.5px), calc(100% - 1.5px) 1.5px, 0px 1.5px);
}

input {
  background: transparent;
  border-color: transparent;
  border-radius: 0;
  color: white;
  width : 100%;
  height: 100%;
  outline: none;
}
<div class="wrapper">
  <input type="text" />
</div>

The clip path is kind of too complicated to explain bit-by-bit, but it essentially cuts out the middle of a solid rectangle as well as a little corner. So in this case, the background color is what controls the "border color". In order to animate on hover, it probably changes some elements of the clipping path if I were to guess.

Khauri
  • 3,753
  • 1
  • 11
  • 19