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>