CSS对角线边框输入字段

Question

我尝试使用具有对角线侧面的输入字段创建以下表单，以便它们很好地配合在一起，请参阅下面的图像以获得更准确的描述。

然而我无法实现这一点，因为我不知道如何做到这一点。我尝试过透明边框但没有成功。

有人知道如何做到这一点？

Answer 1

您可以为容器申请transform: skewX，＆＃34;撤消＆＃34;对于项目，它（通过应用相同的变换，但具有相反的角度符号），并使用外部容器的overflow:hidden隐藏外角，如下所示：

＆＃13;

＆＃13;

form {
  margin: 20px;
  overflow: hidden;
  width: 350px;
}

.row {
  display: flex;
  transform: skewX(-15deg);
  margin: 0 -5px;
}

.cell {
  display: flex;
  margin: 0 3px;
  overflow: hidden;
}

.wide {
  flex: 1;
}

.cell > * {  
  transform: skewX(15deg);
  margin: 0 -5px;
  border: none;
  flex: 1;
}

input {
  padding: 4px 5px 4px 15px;
  background: yellow;
}

button {
  padding: 4px 25px 4px 20px;
  background: pink;
}

＆＃13;

<form class="outer-container">
<div class="row">
  <div class="cell wide"><input placeholder="enter something"></div>
  <div class="cell"><button>Press me</button></div>
</div>
</form>

＆＃13;

＆＃13;

＆＃13;

Answer 2

我喜欢Ilya的skew解决方案。超级创意。

这里有一个选项，使用一些:after伪元素和CSS三角形来创建倾斜效果。为了达到预期的效果，我们将:after个伪元素添加到左侧输入的右侧，并添加到右侧输入/按钮的左侧。

这是最终结果：

＆＃13;

＆＃13;

.container {
  display: flex;
  flex-direction: column;
  background-color: #565452;
  padding: 20px;
}

.row {
  display: flex;
}

.row:not(:last-child) {
  margin-bottom: 60px;
}

.field {
  width: calc(100% - 10px);
  position: relative;
  background-color: #565452;
}

.field:first-child {
  margin-right: 30px;
}

.field:after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  width: 0px;
  height: 0px;
}

.field:first-child:after {
  right: -15px;
  border-top: 60px solid #ffffff;
	border-right: 15px solid transparent;
}

.field:last-child:after {
  left: -15px;
  border-bottom: 60px solid #ffffff;
	border-left: 15px solid transparent;
}

.field.field--button {
 flex-basis: 25%;
}

.field.field--button:after {
  border-bottom: 60px solid #F9D838;
}

.input {
  border: none;
  line-height: 60px;
  outline: none;
  padding: 0 15px;
  width: 100%;
  box-sizing: border-box;
  background-color: #ffffff;
  font-size: 18px;
}

.input::placeholder {
  color: #cccccc;
}

.button {
  background-color: #F9D838;
  color: #ffffff;
  border: none;
  outline: none;
  line-height: 60px;
  font-size: 30px;
  width: 100%;
  padding: 0 30px 0 20px;
  text-transform: uppercase;
}

＆＃13;

<form>
  <div class="container">
    <div class="row">
      <div class="field">
        <input class="input" placeholder="Voornaa m" />
      </div>
      <div class="field">
        <input class="input" placeholder="Achternaa m" />
      </div>
    </div>
    <div class="row">
      <div class="field">
        <input class="input" placeholder="E-mail" />
      </div>
      <div class="field field--button">
        <button class="button" type="submit">Go</button>
      </div>
    </div>
  </div>
</form>

＆＃13;

＆＃13;

＆＃13;

Answer 3

我会在末尾添加一个单独的span元素，然后使用border-bottom / top / left / right并将它们设置为您需要的颜色。

像这样：http://jsfiddle.net/delnolan/3jbtf9f1/

<style>
    .angled-input{
    border: none; 
    height: 50px;
    float: left;
    display:block;
    }
    input:focus{
        outline: none;
    }
    .add-angle{
    display: block;
    float:left;
    border-right:30px solid transparent;
    border-bottom: 50px solid #ffffff;
    }
</style>
<form>
  <input class="angled-input"/><span class="add-angle"></span>
</form>