给边框自定义形状由CSS包含输入类型

Question

我有这个自定义形状与CSS。我需要给它一个边界，但到目前为止我还没有成功。我怎么能给它一个边界？

.comment-input-container { 
 
    width: 96%; 
 
    float: left; 
 
} 
 
input[type='text'] { 
 
    border: 0px !important; 
 
    box-shadow: none; 
 
    background-color: #f2f2f2; 
 
    box-shadow: inset 0 0px 0px rgba(0, 0, 0, 0.1); 
 
    padding: 5px; 
 
} 
 
.arrow-left { 
 
    float: left; 
 
    width: 0; 
 
    height: 0; 
 
    border-bottom: 10px solid #fff; 
 
    border-right: 10px solid #f2f2f2; 
 
}

<div style="width: 300px;"> 
 
    <div class="arrow-left"> 
 

 
    </div> 
 
    <div class="comment-input-container"> 
 
    <input type="text" placeholder="Reply to comment..." /> 
 
    </div> 
 
</div>

此外，另一个问题是，对于较小的设备中的箭头和输入断，即，在输入被堆叠的箭头的下方。有没有更好的方式来创造这种形状，也是响应和保持完好？

Answer 1

感谢哈利，我能够制定出一个laregely响应的解决方案：已经使用边界创建

.comment-input-container { 
 
    position: relative; 
 
    width: 100%; 
 
    border-left: none; 
 
    /* not required as the shape needs to be transparent */ 
 
    border-top-left-radius: 0px; 
 
    border-bottom-left-radius: 0px; 
 
} 
 
.comment-input-container:before { 
 
    position: absolute; 
 
    content: ''; 
 
    top: 0px; 
 
    left: -7px; 
 
    height: 26%; 
 
    width: 10%; 
 
    background-color: #f6f7fb; 
 
    border-top: 1px solid #e6e6e6; 
 
    border-left: 1px solid #e6e6e6; 
 
    -webkit-transform-origin: bottom right; 
 
    -webkit-transform: skew(45deg); 
 
    -moz-transform: skew(45deg); 
 
    transform: skew(45deg); 
 
} 
 
.comment-input-container:after { 
 
    position: absolute; 
 
    content: ''; 
 
    left: -7px; 
 
    height: 74%; 
 
    width: 5%; 
 
    max-width: 15px; 
 
    bottom: 0px; 
 
    border-left: 1px solid #e6e6e6; 
 
    border-bottom: 1px solid #e6e6e6; 
 
    background-color: #f6f7fb; 
 
} 
 
input[type="text"] { 
 
    border: 1px solid #e6e6e6; 
 
    border-left: none; 
 
    box-shadow: none; 
 
    background-color: #f6f7fb; 
 
    box-shadow: inset 0 0px 0px rgba(0, 0, 0, 0.1) !important; 
 
    margin: 0px; 
 
    padding: 10px; 
 
    outline: none; 
 
} 
 
input[type="text"]:focus { 
 
    border: 1px solid #e6e6e6; 
 
    border-left: none; 
 
    box-shadow: none; 
 
    background-color: #f6f7fb !important; 
 
    box-shadow: inset 0 0px 0px rgba(0, 0, 0, 0.1) !important; 
 
    padding: 10px; 
 
    outline: none; 
 
} 
 
.comment-box { 
 
    margin-left: 50px; 
 
    height: 50px; 
 
}

<div class="comment-box"> 
 
    <div class="comment-input-container"> 
 
    <input type="text" placeholder="Reply to comment..." /> 
 
    </div> 
 
</div>

Answer 2

我认为特殊形状是最后一个？它是0px x 0px，但你应该看到一些东西，因为你给它一个10px的边框。不幸的是，边框是白色的，因此它与白色背景融为一体。我制作了1px x 1px的形状和背景黑色，以便您可以更好地看到形状。

body { background: black; } 
 
.comment-input-container { 
 
    width: 96%; 
 
    float: left; 
 
} 
 
input[type='text'] { 
 
    border: 0px !important; 
 
    box-shadow: none; 
 
    background-color: #f2f2f2; 
 
    box-shadow: inset 0 0px 0px rgba(0, 0, 0, 0.1); 
 
    padding: 5px; 
 
} 
 
.arrow-left { 
 
    float: left; 
 
    width: 1px; 
 
    height: 0px; 
 
    border-bottom: 10px solid rgba(0, 0, 0, 0.0); 
 
    border-right: 10px solid #f2f2f2; 
 
    box-shadow: inset 4px 2px 22px 6px rgba(0,0,0,0.57); 
 
    outline: 2px inset rgba(0, 0, 0, .35; 
 
}

<div style="width: 300px;"> 
 
    <div class="arrow-left"> 
 

 
    </div> 
 
    <div class="comment-input-container"> 
 
    <input type="text" placeholder="Reply to comment..." /> 
 
    </div> 
 
</div>