有没有办法塑造 HTML 表单的提交按钮？答案

【问题标题】：Is there any way to shape the submit button of the HTML form?有没有办法塑造 HTML 表单的提交按钮？
【发布时间】：2015-06-20 08:51:15
【问题描述】：

我正在创建一个带有表单的 html 页面。因为我想让我的提交按钮看起来像下面的箭头（不完全在下面，我期待只是 2D 箭头）...

有什么办法吗...

【问题讨论】：

使用背景图片...
是的，我们可以使用背景图片，但按钮看起来仍然是矩形。我想塑造它...
jsfiddle.net/soledar10/s5vvdnqu
jsfiddle.net/Revanth_Rev/bcq898mb/1

标签： html css forms button

【解决方案1】：

如果你有兴趣使用背景图片，那么你可以这样使用：

button{
   background: transparent url(shape.jpg) no-repeat;
   border: none;
   box-shadow: none;
   width: 250px; /*img width*/
   height: 350px; /*img height*/
}

【讨论】：

实际上这很好用......但是，它仍然可以在箭头周围点击（我的意思是左上角和左下角）。因为这段代码只是隐藏了背景并使它们透明。但是，我问的是如何将按钮塑造成只能在箭头中点击。不在空间周围...

【解决方案2】：

是的，您可以在 css 中执行类似这样的操作，但添加您自己的尺寸，并将提交按钮应用于此，您只需在表单中的提交按钮上方或下方添加此 HTML，然后只需将提交按钮放置在此箭头上，然后通过向提交按钮添加 opacity: 属性使其透明

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#triangle{
width: 0;
height: 0;
border-top: 50px solid transparent;
border-left: 100px solid red;
border-bottom: 50px solid transparent;
margin: 100px;
}
#square{
width: 100px;
height: 40px;
margin: -20px 0 0 -200px;
background: blue;
}
</style>
</head>
<body>
<div id="triangle"><div id="square"></div></div>    
</body>
</html>

【讨论】：

【解决方案3】：

在 html5 中使用 svg 图形。 HTML 元素（在 HTML5 中引入）是 SVG 图形的容器。

SVG 有多种绘制路径、框、圆、文本和图形图像的方法。

【讨论】：