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

wsewodh2 于 10个月前发布在其他

关注(0)|答案(1)|浏览(174)

我想设置文本框边框像六边形
我设计了一个类似东西。我的代码：

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

个字符

的数据

Html

来源：https://stackoverflow.com/questions/57033581/how-to-create-textbox-hexagon-border

1条答案

按热度按时间

gc0ot86w1#

这是一个具有多种背景的想法。代码取自我的在线生成器：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
}

个字符

赞(0）回复(0）举报 10个月前

我来回答

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

1条答案

相关问题

热门标签

最新问答