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

Question

• 我想将文本框边框设置为六边形
• 我有设计创造类似的东西。 我的代码:

#example1 {
  border: 2px solid red;
  padding: 10px;
  border-radius: 25px;
}

<div id="example1">
  <p>The border-radius property defines the radius of the element's corners.</p>
</div>

Answer 1

这是一个具有多重背景的想法。代码取 self 的在线生成器: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">