htmlcssclip-path

How to crop the form field

How can I style the form field as shown in the screenshot, with a border, while cropping the top-left and bottom-right corners?

I have tried to use clip-path: polygon(), but it varies on different screen sizes. I need a consistent setting that works for all screen sizes.

enter image description here

<div class="formCell  surname ">
  <label>Surname<span>*</span></label>
  <input type="text" placeholder="" name="surname" id="" class="text" value="">
</div>

Solution

  • You can use clip-path with units of % or px, so along with variables for easy width and height changes, I've just wrote this code. The border "effect" is made using two elements (one of those is pseudo-element which cannot be applied to an input so I've used a contenteditable div).

    :root {
  --cut-corner-width: 200px;
  --cut-corner-height: 40px;
  --cut-corner-size: 10px;
  background: navy;
}

.cut-corner {
  width: var(--cut-corner-width);
  height: var(--cut-corner-height);
  line-height: var(--cut-corner-height);
  background-color: red;
  clip-path: polygon(var(--cut-corner-size) 0, calc(100% - var(--cut-corner-size)) 0, 100% var(--cut-corner-size), 100% calc(100% - var(--cut-corner-size)), calc(100% - var(--cut-corner-size)) 100%, var(--cut-corner-size) 100%, 0 calc(100% - var(--cut-corner-size)), 0 var(--cut-corner-size));
  position: relative;
  color: white;
  padding: 10px;
  outline: none;
}

.cut-corner:before {
  padding: 10px;
  content: '';
  width: calc(var(--cut-corner-width) - 4px);
  height: calc(var(--cut-corner-height) - 4px);
  background-color: navy;
  clip-path: polygon(var(--cut-corner-size) 0, calc(100% - var(--cut-corner-size)) 0, 100% var(--cut-corner-size), 100% calc(100% - var(--cut-corner-size)), calc(100% - var(--cut-corner-size)) 100%, var(--cut-corner-size) 100%, 0 calc(100% - var(--cut-corner-size)), 0 var(--cut-corner-size));
  position: absolute;
  left: 2px;
  top: 2px;
  z-index: -1;
}
    <div class="cut-corner" contenteditable="true">
  value
</div>

    Here's an improved version with an input. Use this one:

    :root {
  --cut-corner-width: 200px;
  --cut-corner-height: 30px;
  --cut-corner-size: 10px;
  --cut-corner-border: 1px;
  background: white;
}

.my-polygon {
  clip-path: polygon(var(--cut-corner-size) 0, 100% 0, 100% calc(100% - var(--cut-corner-size)), calc(100% - var(--cut-corner-size)) 100%, 0 100%, 0 var(--cut-corner-size));
  padding: 10px;
  border: 0;
}

.border-container {
  width: var(--cut-corner-width);
  height: var(--cut-corner-height);
  line-height: var(--cut-corner-height);
  background-color: black;
  position: relative;
}

.cut-corner {
  outline: none;
  width: calc(var(--cut-corner-width) - var(--cut-corner-border) * 2);
  height: calc(var(--cut-corner-height) - var(--cut-corner-border) * 2);
  background-color: white;
  position: absolute;
  left: var(--cut-corner-border);
  top: var(--cut-corner-border);
  z-index: -1;
}


/* general styles */

label {
  padding-right: 20px;
}

.flex-container {
  display: flex;
  align-items: center;
}
    <div class="flex-container">
  <label>enter your name: </label>

  <div class="border-container my-polygon">
    <input class="cut-corner my-polygon" value="First Name">
  </div>

</div>