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制作的自定义形状赋予边框

2 个答案: