Как создать треугольный элемент div с рамкой и свойством background?

Question

Мне нужно создать треугольник div, у которого есть граница, и я также могу изменить цвет фона, и это тоже нужно перетаскивать. Как мне это сделать?

Я пробовал клип-путь: многоугольник (50% 0, 0 100%, 100% 100%); а также с псевдоэлементом before after, но здесь нет реальной границы, которая может быть проблемой ... Кто-нибудь может помочь? :) спасибо

Answer 1

Вот идея с косым преобразованием:

.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>

Answer 2

вот решение (без рамки): 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;
  }
}