給邊框自定義形狀由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>