CSS的对角文本框边框样式

Question

Can anybody help me styling a textbox border like in image only by css.I have tried the following css but not working perfectly

.addfolder-input {
    border: medium none;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    margin-bottom: 20px;
    width: 100%;
    padding: 0 10px;
    border-top: 0;
   border-right: 0;
   border-bottom: solid 2px #3c5a9a;
   border-left: 0;
   border-radius:5px;
}

Answer 1

This is one possible approach by using a container element around the text box and then adding an absolutely positioned pseudo-element to the container which is rotated along the X-axis with a bit of perspective.

Rotating along the X-axis with perspective makes the rectangle look as though it sides are going away from each other as we go from bottom of the rectangle to its top. The top-border of the pseudo-element is nullified as we don't need it.

Whatever width is required for the text-box should be set to the container as both the pseudo-element and the text-box derive their `width (100%) from their container.

 .addfolder-input { font-family: Arial, Helvetica, sans-serif; font-size: 12px; margin-bottom: 20px; width: 100%; padding: 0 10px; border: none; outline: none; } .container { position: relative; width: 100px; } .container:after { position: absolute; content: ''; bottom: 48%; left: 6px; width: 100%; height: 6px; border: 2px solid #3c5a9a; border-top: none; -webkit-transform: perspective(10px) rotateX(-10deg); -moz-transform: perspective(10px) rotateX(-10deg); transform: perspective(10px) rotateX(-10deg); } 

 <div class="container"> <input type="text" class="addfolder-input" value="Type Something..."/> </div> 

---

Here is another alternate using multiple backgrounds, linear-gradients and background positioning. This can also work but in some browsers the angular edges/borders become a bit jagged.

 .addfolder-input { font-family: Arial, Helvetica, sans-serif; font-size: 12px; margin-bottom: 20px; width: 85%; padding: 0 10px; border: none; outline: none; position: relative; left: 6px; } .container { position: relative; width: 120px; } .container:after { position: absolute; content: ''; bottom: 48%; left: 6px; width: 100%; height: 6px; background: -webkit-linear-gradient(45deg, transparent 9%, #3c5a9a 9%, #3c5a9a 12%, transparent 12%), -webkit-linear-gradient(-45deg, transparent 9%, #3c5a9a 9%, #3c5a9a 12%, transparent 12%), -webkit-linear-gradient(0deg, transparent 9%, #3c5a9a 9%, #3c5a9a 95%, transparent 11%) no-repeat; background: -moz-linear-gradient(45deg, transparent 9%, #3c5a9a 9%, #3c5a9a 12%, transparent 12%), -moz-linear-gradient(-45deg, transparent 3%, #3c5a9a 3%, #3c5a9a 6%, transparent 6%), -moz-linear-gradient(90deg, transparent 9%, #3c5a9a 9%, #3c5a9a 86%, transparent 86%) no-repeat; background: linear-gradient(45deg, transparent 9%, #3c5a9a 9%, #3c5a9a 12%, transparent 12%), linear-gradient(-45deg, transparent 3%, #3c5a9a 3%, #3c5a9a 6%, transparent 6%), linear-gradient(90deg, transparent 9%, #3c5a9a 9%, #3c5a9a 86%, transparent 86%) no-repeat; background-position: 0px 6px, 107px 6px, 0px 4px; } 

 <div class="container"> <input type="text" class="addfolder-input" value="Type Something..." /> </div>