为包含输入类型的 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

我假设特殊形状是最后一个？它是 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>

Answer 2

多亏了 Harry，我才能够制定出一个反应灵敏的解决方案：

.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>

为包含输入类型的 css 制作的自定义形状添加边框

Give border to custom shape made by css containing an input type

html

css

css-shapes