javascript - 如何创建带有边框和背景属性的三 Angular 形 div？

Question

我必须创建一个带有边框的 div 三 Angular 形，我还可以更改背景颜色，而且这需要可拖动。我该怎么做？

我试过 clip-path: polygon(50% 0, 0 100%, 100% 100%);并且还有 before after 伪元素，但这里不是实际的边框，这可能是个问题......任何人都可以帮忙吗？:) 谢谢

Answer 1

这是解决方案(无边框):HTML:

<div class="arrow-up" id="arrow-up"></div>

CSS:

.arrow-up {
  width: 0; 
  height: 0; 
  border-left: 70px solid transparent;
  border-right: 70px solid transparent;
  border-bottom: 100px solid green;
  position: absolute;
}

JavaScript:

//Make the DIV element draggagle:
dragElement(document.getElementById("arrow-up"));

function dragElement(elmnt) {
  var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;

    elmnt.onmousedown = dragMouseDown;

  function dragMouseDown(e) {
    e = e || window.event;
    e.preventDefault();
    // get the mouse cursor position at startup:
    pos3 = e.clientX;
    pos4 = e.clientY;
    document.onmouseup = closeDragElement;
    // call a function whenever the cursor moves:
    document.onmousemove = elementDrag;
  }

  function elementDrag(e) {
    e = e || window.event;
    e.preventDefault();
    // calculate the new cursor position:
    pos1 = pos3 - e.clientX;
    pos2 = pos4 - e.clientY;
    pos3 = e.clientX;
    pos4 = e.clientY;
    // set the element's new position:
    elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
    elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
  }

  function closeDragElement() {
    /* stop moving when mouse button is released:*/
    document.onmouseup = null;
    document.onmousemove = null;
  }
}

---

带边框的三 Angular 形:

html:

<div class="arrow-up" id="arrow-up">
  <div class="inside-triangle"></div>
</div>

CSS:

.arrow-up {
  width: 0; 
  height: 0; 
  border-left: 70px solid transparent;
  border-right: 70px solid transparent;
  border-bottom: 70px solid green;
  position: absolute;
}

.inside-triangle {
  left: -60px;
  top: 6px;
   width: 0; 
  height: 0; 
  border-left: 60px solid transparent;
  border-right: 60px solid transparent;
  border-bottom: 60px solid blue;
  position: absolute;
}

JavaScript:

//Make the DIV element draggagle:
dragElement(document.getElementById("arrow-up"));

function dragElement(elmnt) {
  var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;

    elmnt.onmousedown = dragMouseDown;

  function dragMouseDown(e) {
    e = e || window.event;
    e.preventDefault();
    // get the mouse cursor position at startup:
    pos3 = e.clientX;
    pos4 = e.clientY;
    document.onmouseup = closeDragElement;
    // call a function whenever the cursor moves:
    document.onmousemove = elementDrag;
  }

  function elementDrag(e) {
    e = e || window.event;
    e.preventDefault();
    // calculate the new cursor position:
    pos1 = pos3 - e.clientX;
    pos2 = pos4 - e.clientY;
    pos3 = e.clientX;
    pos4 = e.clientY;
    // set the element's new position:
    elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
    elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
  }

  function closeDragElement() {
    /* stop moving when mouse button is released:*/
    document.onmouseup = null;
    document.onmousemove = null;
  }
}