[英]I want to create input text and submit box right inside curve. I tried some css but its not working
I search but not received similar code;我搜索但没有收到类似的代码; I'm facing problems in making inside curve borders:我在制作内部曲线边界时遇到问题:
input[type="text"] { border: none; background-color: #fff; padding: 10px 15px; border-radius: 5px; outline: none; } input[type="submit"] { border: 1px solid #9efffc; background-color: transparent; padding: 10px 15px; border-radius: 5px; outline: none; color: #9efffc; }
<form action=""> <label for="">Join VistaVerse</label> <input type="text" name="" id="" placeholder="Email Address"> <input type="submit" value="SIGN UP"> </form>
It's feasible using clip-path: path(…)
, but unfortunately it requires to work with fixed sizes (no responsive).使用clip-path: path(…)
是可行的,但不幸的是它需要使用固定大小(无响应)。
See the Illustrated Guide to the SVG path
Syntax for how to produce the shape you want.有关如何生成所需形状的信息,请参阅SVG path
语法图解指南。 In this example we'll need an Arch and Lines.在这个例子中,我们需要一个 Arch 和 Lines。
Because a clipped element cannot have a border, we use a::before
pseudo-element to cover up the inside of the button with a slightly smaller shape.因为被裁剪的元素不能有边框,所以我们使用::before
伪元素来覆盖按钮的内部,形状略小。
See How to add border in my clip-path: polygon();请参阅如何在我的剪辑路径中添加边框:多边形(); CSS style for other possible techniques to outline a shape.其他可能的技术来勾勒形状的CSS 样式。
Also provide some extra style for the focus
state, to not exclude users with disabilities or keyboard fans.还为focus
状态提供一些额外的样式,以不排除残障用户或键盘爱好者。
fieldset { background: #212121; border: 0; padding: 1rem; width: fit-content; display: flex; gap: 15px; } fieldset > * { box-sizing: border-box; height: 50px; padding: 0 1rem; font: 1rem system-ui; } fieldset > *:focus { outline: none; } input { min-width: 300px; clip-path: path('M 300 0 A 25 30 0 0 0 300 50 L 0 50 L 0 0') } input:focus { background: cyan; color: #212121; } button { position: relative; width: 215px; margin-left: -25px; cursor: pointer; border: 0; color: #fff; background: currentColor; clip-path: path('M 25 0 A 25 30 0 0 0 25 50 L 185 50 L 215 25 L 185 0') } button:focus { color: cyan; } button span { position: absolute; z-index: 2; inset: 0; line-height: 50px; } button::before { content: ""; position: absolute; z-index: 1; pointer-events: none; display: block; inset: 0; background: #212121; clip-path: path('M 25 1 A 24 30 0 0 0 25 49 L 185 49 L 214 25 L 185 1 z') }
<form> <fieldset> <input type="text" aria-label="insert your email" placeholder="Email Address"> <button type="submit"><span>Sign up</span></button> </fieldset> </form>
Add another element (you can put span) on the right side of the input box and the left side of the button set the background black, and give a radius from the left side.在输入框右侧添加另一个元素(可以放span),左侧按钮设置背景为黑色,并从左侧给定一个半径。 Adjust it accordingly.相应地调整它。 Hopefully it will solve your problem.希望它能解决你的问题。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.