我必须创建一个带边框的div三角形,并且我还可以更改背景色,并且该色必须可拖动。 我该怎么做?
我尝试了剪切路径:多边形(50%0、0 100%,100%100%); 以及在before伪元素之后,但这不是一个实际的边界,可能是一个问题...有人可以帮忙吗?:)谢谢
答案 0 :(得分:0)
这是解决方案(无边界): 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;
}
}
答案 1 :(得分:0)
这是一个偏斜变换的想法:
.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>