How to create diagonal inputs

Question

I want to create a diagonal input like this:

I know how I make the colors and every thing but I don't know how I make borders like that

#nameinp{
 border-right:5px #4d0026 solid;
 border-left:none;
 border-bottom:none;
 border-top:none;
 background-color:#e6e6e6;
 width:140px;
 height:25px;
 text-align:center;
 font-size:17px;
}

what I add to this

Check if this helps: https://stackoverflow.com/questions/16825042/how-to-create-slanted-tabs-with-a-border-in-css — Abhi, Jun 15 '17 at 15:01

XYZ · Accepted Answer · 2017-06-15T15:24:08.533

Use skewX().This skews an element along the X-axis by the given angle.

#nameinp{
 border-right:5px #4d0026 solid;
 border-left:none;
 border-bottom:none;
 border-top:none;
 background-color:#e6e6e6;
 width:140px;
 height:25px;
 text-align:center;
 font-size:17px;
  -ms-transform: skewX(20deg); /* IE 9 */
    -webkit-transform: skewX(20deg); /* Safari */
    transform: skewX(20deg);
}

<input type="text" id="nameinp"/>

If you want the placeholder straight wrap another layer over the input and skew it.Then skew the inner input the exact opposite amount.

#nameinp {
  border-right: 5px #4d0026 solid;
  border-left: none;
  border-bottom: none;
  border-top: none;
  background-color: #e6e6e6;
  width: 140px;
  text-align: center;
  font-size: 17px;
  -ms-transform: skewX(20deg);
  /* IE 9 */
  -webkit-transform: skewX(20deg);
  /* Safari */
  transform: skewX(20deg);
}

#nameinp input {
  height: 25px;
  width: 128px;
  background: #e6e6e6;
  -ms-transform: skewX(-20deg);
  /* IE 9 */
  -webkit-transform: skewX(-20deg);
  /* Safari */
  transform: skewX(-20deg);
  border: none;
}

<div id="nameinp">
  <input type="text" placeholder="Enter" />
</div>

do you know how can i leave the placeholder stable – Sohaib Krim Jun 15 '17 at 15:18 — Sohaib Krim, Jun 15 '17 at 15:18
@SohaibKrim Updated the answer.Please check that – XYZ Jun 15 '17 at 15:25 — XYZ, Jun 15 '17 at 15:25

score 0 · Answer 2 · answered Nov 08 '18 at 15:44

Here is an alternate solution that skews the outer <span> and not the inner <input>

It is still not perfect, but it does not skew the text or placeholder in the input field.

.skewed {
  border: 1px solid transparent;
  border-right: 5px solid #4d0026;
 background-color:#e6e6e6;
  display: inline-block;
  -ms-transform: skewX(20deg); /* IE 9 */
  -webkit-transform: skewX(20deg); /* Safari */
  transform: skewX(20deg);
}

.skewed > input {
  border: none;
  background-color: transparent;
  font-size: 17px;
 height: 25px;
  margin: 0 5px;
 text-align :center;
  -ms-transform: skewX(-20deg); /* IE 9 */
  -webkit-transform: skewX(-20deg); /* Safari */
  transform: skewX(-20deg);
 width: 140px;
}

<span class="skewed"><input type="text" id="nameinp" placeholder=""/></span>

How to create diagonal inputs

2 Answers2