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

Question

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

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

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;
  }
}

---

带边框的三角形：

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;
  }
}

Answer 2

这是一个带有倾斜变换的想法：

.tri {
  width: 100px;
  height: 100px;
  border-right: 5px solid;
  border-bottom: 5px solid;
  position: relative;
  overflow: hidden;
  transform: skewX(25deg);
}

.tri::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left:0;
  border-left: 5px solid;
  transform: skewX(-45deg);
  transform-origin:bottom right;
  background:red;
}
*,*::before {
  box-sizing:border-box;
}

<div class="tri"></div>

另一个具有多个背景的想法，其中诀窍是堆叠两个三角形：

.tri {
  width: 100px;
  height: 100px;
  background:
    /*top one*/
    linear-gradient(to top right ,red 49.2%,transparent 50%) calc(100% - 5px) 7px/calc(50.2% - 5px) calc(100% - 2 * 5px),
    linear-gradient(to top left ,red 49.2%,transparent 50%) 5px 7px/calc(50.2% - 5px) calc(100% - 2 * 5px),
    /*bottom one*/
    linear-gradient(to top left ,#000 49.2%,transparent 50%) left/50.2% 100%,
    linear-gradient(to top right,#000 49.2%,transparent 50%) right/50.2% 100%;
  background-repeat:no-repeat;
}

<div class="tri"></div>

您可以添加 CSS 变量以获得更好的控制：

.tri {
  --border-color:#000;
  --back-color:red;
  --border:5px;
  
  --c1:var(--back-color) 49.2%,transparent 50%;
  --c2:var(--border-color) 49.2%,transparent 50%;
  width: 100px;
  height: 100px;
  background:
    /*top one*/
    linear-gradient(to top right, var(--c1)) calc(100% - var(--border)) calc(1.25*var(--border))/calc(50.2% - var(--border)) calc(100% - 2 * var(--border)),
    linear-gradient(to top left ,var(--c1)) var(--border) calc(1.25*var(--border))/calc(50.2% - var(--border)) calc(100% - 2 * var(--border)),
    /*bottom one*/
    linear-gradient(to top left ,var(--c2)) left/50.2% 100%,
    linear-gradient(to top right,var(--c2)) right/50.2% 100%;
  background-repeat:no-repeat;
}

<div class="tri"></div>

<div class="tri" style="--border:10px;--border-color:green;"></div>


<div class="tri" style="--border:15px;--back-color:blue;"></div>