Question

我正在创建一个包含表单的html页面。因为我想把我的提交按钮塑造成像下面的箭头（不完全在下面，我只期待2D箭头）......

enter image description here

有没有办法做到这一点......

Answer 1

如果您对使用背景图片感兴趣，那么您可以这样使用：

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

Answer 2

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

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

Answer 3

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

SVG有几种绘制路径，方框，圆圈，文本和图形图像的方法。

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

3 个答案: