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

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

这是一个有多种背景的想法：

input {
  width:300px;
  height:50px;
  padding:5px;
  box-sizing:border-box;
  border:none;
  outline:0;
  background:
    linear-gradient(grey,grey) top   /calc(100% - 30px) 1px,
    linear-gradient(grey,grey) bottom/calc(100% - 30px) 1px,
    linear-gradient(grey,grey) left  /1px calc(100% - 30px),
    linear-gradient(grey,grey) right /1px calc(100% - 30px),
    
    linear-gradient(to bottom right,
      transparent calc(50% - 1px),grey,transparent calc(50% + 1px))
      top left/15px 15px,
    linear-gradient(to bottom right,
      transparent calc(50% - 1px),grey,transparent calc(50% + 1px))
      bottom right/15px 15px,
    linear-gradient(to bottom left,
      transparent calc(50% - 1px),grey,transparent calc(50% + 1px))
      top right/15px 15px,
    linear-gradient(to bottom left,
      transparent calc(50% - 1px),grey,transparent calc(50% + 1px))
      bottom left/15px 15px;
    
 background-repeat:no-repeat;
}

<input type="text">