Question

我正在尝试制作交互式海报，但是我不知道如何使正方形具有尖锐的边缘。

请检查我所附的图片！

$("body").mousemove(function(e) {
  var box = $("<div/>")
  box.css("top", e.pageY);
  box.css("left", e.pageX);
  box.css("background-color", "black");
  $("body").append(box);
  box.animate({
    height: "2000px",
    opacity: .0
  }, 2000, "swing");
});

body {
  position: relative;
  height: 5000px;
  width: 100%;
  margin: 0;
}

div {
  height: 50px;
  width: 50px;
  opacity: .35;
  position: absolute;
  transform: translate(0%, -100%);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>

<head>
  <meta charset="utf-8">
  <title></title>
  <link rel="stylesheet" href="index.css" />
</head>

<body>


  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <!-- include .js files here -->
  <script src="script.js"></script>
</body>

</html>

So currently my code creates this visual effect,

But I want the black squares to be pointed like this

Answer 1

也许您可以使用CSS箭头/三角形技巧。创建一个三角形而不是矩形：

将div大小设置为0x0，并设置一个大边框，一半透明（底部/右侧）和一半黑色（顶部/左侧）。

$("body").mousemove(function(e) {
  var box = $("<div/>")
  box.css("top", e.pageY);
  box.css("left", e.pageX);
  $("body").append(box);
  box.animate({
    height: "2000px",
    opacity: .0
  }, 2000, "swing");
  
});

body {
  position: relative;
  height: 5000px;
  width: 100%;
  margin: 0;
}

div {
  width: 0px;
  height: 0px;
  border: 50px solid transparent;
  border-left-color: black;
  opacity: .35;
  position: absolute;
  transform: translate(0%, -100%);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>

<head>
  <meta charset="utf-8">
  <title></title>
  <link rel="stylesheet" href="index.css" />
</head>

<body>


  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <!-- include .js files here -->
  <script src="script.js"></script>
</body>

</html>

Answer 2

使用CSS string dirConta = Environment.CurrentDirectory + "/Bd/contas.txt"; private void buttonGravaPass_Click(object sender, EventArgs e) { string[] lines = File.ReadLines(dirConta).ToArray(); for (int i = 0; i < File.ReadAllLines(dirConta).Count(); i++) { string[] parts = lines[i].Split(new char[] { '|' }); if (parts[0] == Users.user) { lines[i] = lines[i].Remove(lines[i].Length - 5); lines[i] = lines[i] + "12345"; } File.WriteAllText(dirConta, lines[i]); } }

clip-path

在https://bennettfeely.com/clippy/上自定义形状

如何使尖的边缘

2 个答案: