Question

我在导航栏下方有一个常规按钮，导航栏周围有150px个空格，我希望它看起来像横幅：

按钮：

我想要的是什么：（类似于此）

我只想在顶部的单个点和按钮的两个点绘制2条线。

我不确定，是否可能？任何类型的指南将不胜感激！

Answer 1

尝试在按钮上方添加几条svg行：

https://jsfiddle.net/1sj0qzvL/

HTML

<div class="hanger">
  <svg height="100" width="100">
    <line x1="10" y1="100" x2="100" y2="0" style="stroke:rgb(255,0,0);stroke-width:2" />
    <circle cx="10" cy="100" r=5 fill="red" />
  </svg>
  <svg height="100" width="100">
    <line x1="0" y1="0" x2="90" y2="100" style="stroke:rgb(255,0,0);stroke-width:2" />
    <circle cx="90" cy="100" r=5 fill="red" />
  </svg>
</div>
<div class="button">
  <div class="button-inner">
    BUTTON TO HANG!
  </div>
</div>

CSS

.hanger {
   margin-bottom: -5px;
}

.button {
  border: 4px solid red;
  width: 200px;
  text-align: center;
}

.button-inner {
  color: red;
  border: 4px solid black;
  padding: 16px;
  background-color: white;
}

Answer 2

以下是在画布中用重力悬挂它的示例：

＆＃13;

var ctx;

window.onload = function() {
  var canvas = document.getElementById("canvas");
  ctx = canvas.getContext("2d");
  update();
}

function draw() {
  ctx.beginPath();
  ctx.moveTo(0,0);
  ctx.lineTo(250,250);
  ctx.stroke();
  
  ctx.beginPath();
  ctx.moveTo(500,0);
  ctx.lineTo(250,250);
  ctx.stroke();
}

function update() {
  ctx.clearRect(0, 0, 500, 500);
  draw();
  requestAnimationFrame(update);
}

＆＃13;

button {
  position: absolute;
  top: 250px;
  left: 210px;
  width: 100px;
  height: 30px;
  border: none;
  border-radius: 10px;
  background-color: blue;
  color: white;
}

body: {
  margin: 0;
  padding: 0;
}

＆＃13;

<!DOCTYPE html>
<html>
  <head>
    <title>Hanging button example</title>
  </head>
  <body>
    <canvas id="canvas" width="500" height="500"></canvas>
    <button>Click me!</button>
  </body>
</html>

＆＃13;

您可以使用phaser.js和我们的引力或其他功能来增加功能。你也可以在画布上画出按钮，但没有重力，这就足够了。

如何使用html和css挂起按钮

2 个答案: