如何創建文本框六邊形邊框？

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">