如何创建文本框六边形边框？

Answer 1

这是一个具有多重背景的想法。代码取自我的在线生成器：https://css-generators.com/custom-corners/

input {
  --c: red;

  width:300px;
  height:50px;
  padding:5px;
  box-sizing:border-box;
  border:none;
  outline:0;
  background:
    linear-gradient( 45deg,#0000 9.90px, var(--c) 0 calc(9.90px +  3px), #0000 0 calc(100% - 9.90px -  3px), var(--c) 0 calc(100% - 9.90px), #0000 0),
    linear-gradient(-45deg,#0000 9.90px, var(--c) 0 calc(9.90px +  3px), #0000 0 calc(100% - 9.90px -  3px), var(--c) 0 calc(100% - 9.90px), #0000 0),
    linear-gradient(90deg ,var(--c) 6px,#0000 0) -3px 50%/100% calc(100% - 28px) repeat-x,
    linear-gradient(180deg,var(--c) 6px,#0000 0) 50% -3px/calc(100% - 28px) 100% repeat-y
}

<input type="text">