How to make pointed edge

Question

I am trying to make interactive poster, but I have no idea how to make the squares to have pointed edges.

Please check out the image I attached!!

$("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

Possible duplicate of [CSS3 Transform Skew One Side](https://stackoverflow.com/questions/19761202/css3-transform-skew-one-side) — Jere, Nov 20 '18 at 20:38
also, check out this site for CSS tricks like that: https://css-tricks.com/the-shapes-of-css/ — Jere, Nov 20 '18 at 20:39

Itay Gal · Accepted Answer · 2018-11-20T23:22:21.310

Maybe you can use the css arrow/triangle trick. Create a triangle instead of a rectangle:

Setting the div size to 0x0 and setting a big border, half transparent (bottom/right) and half black (top/left).

$("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>

Cool!! Thanks but is there any way I can get rid of the top triangle parts? — Bongpalman, Nov 20 '18 at 23:17
Updated my answer, try to remove this ` border-top-color: black;`. — Itay Gal, Nov 20 '18 at 23:20

score 0 · Answer 2 · answered Nov 20 '18 at 20:50

0

Use CSS clip-path

div {
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 48%);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 48%);
}

Customize the shape at https://bennettfeely.com/clippy/

answered Nov 20 '18 at 20:50

jeanpaulxiao

313
2
5

No when it stretched it becomes a line not a rectangle with a pointed edge – Bongpalman Nov 20 '18 at 21:57
a thick line? How does it look – jeanpaulxiao Nov 20 '18 at 22:10
What should it look like? – jeanpaulxiao Nov 20 '18 at 22:34
It should look like this – Bongpalman Nov 20 '18 at 22:47
Are those black lines or black knife shapes? – jeanpaulxiao Nov 20 '18 at 22:49
Could you press the blue box saying Run code snippet to see how it works? – Bongpalman Nov 20 '18 at 22:56

How to make pointed edge

2 Answers2