使用 Javascript、CSS 和 HTML 进行三角形定位（欢迎使用其他方法）
Posted
技术标签:
【中文标题】使用 Javascript、CSS 和 HTML 进行三角形定位（欢迎使用其他方法）【英文标题】：Triangle positioning using Javascript, CSS and HTML (other methods welcome) 【发布时间】：2015-08-21 06:29:13 【问题描述】：我试图想象一个由 20 个三角形组成的纸牌游戏，这些三角形可以以各种方式放置。每个三角形有 3 条边，其余 19 个三角形中的每条边都有对应的边。只有当双方匹配时，它们才能放在一起。
随机生成可能性的代码如下。（我也很高兴对代码进行了改进，我相信这些改进很多
JAVSCRIPT
function Game()
this.cardsUnused = [];
this.cardsUsed = [];
this.possibleCards = [];
this.insert = function (obj)
this.cardsUnused.push(obj);
;
this.useCard = function (obj) // adds a triangle to the usedCards Array and removes it from the UnusedCards Array
this.cardsUsed.push(obj);
this.cardsUnused.remove(obj);
this.possibleCards.remove(obj);// t (array.prototype.remove)
;
this.unuseCard = function (obj)
this.cardsUnused.push(obj);
this.cardsUsed.remove(obj);
;
// remove function
Array.prototype.remove = function ()
var what, a = arguments, L = a.length, ax;
while (L && this.length)
what = a[--L];
while ((ax = this.indexOf(what)) !== -1)
this.splice(ax, 1);
return this;
;
var game = new Game();
// Triangle wird erstellt
function Triangle(name, sideA, sideB, sideC, Direction, position)
this.partName = name;
this.sides = [sideA, sideB, sideC];
this.sidesStatus = [0, 0, 0];
this.sideDirection = Direction;
this.stepUsed = 0;
this.angle = 0;
this.cardPosition = position;
this.turn = function (winkel)
this.angle = this.angle + winkel;
;
this.useSide = function (side)
this.sidesStatus[side] = 1;
;
var a = new Triangle("A", 1, 2, 21, 0, [0, 0]);
var b = new Triangle("B", 2, 3, 22, 0, [0, 0]);
var c = new Triangle("C", 3, 4, 23, 0, [0, 0]);
var d = new Triangle("D", 4, 5, 24, 0, [0, 0]);
var e = new Triangle("E", 5, 1, 25, 0, [0, 0]);
var f = new Triangle("F", 6, 21, 7, 180, [0, 0]);
var g = new Triangle("G", 7, 8, 26, 0, [0, 0]);
var h = new Triangle("H", 8, 22, 9, 180, [0, 0]);
var i = new Triangle("I", 9, 10, 27, 0, [0, 0]);
var j = new Triangle("J", 10, 23, 11, 180, [0, 0]);
var k = new Triangle("K", 11, 12, 28, 0, [0, 0]);
var l = new Triangle("L", 12, 24, 13, 180, [0, 0]);
var m = new Triangle("M", 13, 14, 29, 0, [0, 0]);
var n = new Triangle("N", 14, 25, 15, 180, [0, 0]);
var o = new Triangle("O", 15, 6, 30, 0, [0, 0]);
var p = new Triangle("P", 16, 26, 17, 180, [0, 0]);
var q = new Triangle("Q", 17, 27, 18, 180, [0, 0]);
var r = new Triangle("R", 18, 28, 19, 180, [0, 0]);
var s = new Triangle("S", 19, 29, 20, 180, [0, 0]);
var t = new Triangle("T", 20, 30, 16, 180, [0, 0]);
// an array with 20 triangles
var triangles = [a, b, c, d, e, f, g, h, i, j, k, l, m, n, o, p, q, r, s, t];
// function to add triangles to the game
function addTriangles(arr)
var x;
for (x = 0; x < arr.length; x += 1)
game.insert(triangles[x]);
addTriangles(triangles);
game.useCard(a);
function toRadians (angle)
return angle * (Math.PI / 180);
function findRandomCardPossibleToUsedCards()
var isTrue = 0, randomIndexUsedCard, randomIndexUsedSide, randomIndexUnusedCard, randomIndexUnusedSide, position;
while (isTrue === 0)
randomIndexUsedCard = Math.floor(Math.random() * game.cardsUsed.length);
randomIndexUsedSide = Math.floor(Math.random() * 3);
randomIndexUnusedCard = Math.floor(Math.random() * game.cardsUnused.length);
randomIndexUnusedSide = Math.floor(Math.random() * 3);
if (typeof game.cardsUnused[randomIndexUnusedCard] === 'undefined')
document.getElementById("button").innerhtml = "stopped";
// position = game.cardsUsed[randomIndexUsedCard].cardPosition;
if (game.cardsUsed[randomIndexUsedCard].sidesStatus[randomIndexUsedSide] !== 1 && game.cardsUnused[randomIndexUnusedCard].sidesStatus[randomIndexUnusedSide] !== 1)
if (game.cardsUsed[randomIndexUsedCard].sides[randomIndexUsedSide] === game.cardsUnused[randomIndexUnusedCard].sides[randomIndexUnusedSide])
isTrue = 1;
// the main problem I am having lies withing the next three " if -parts" and the translation into the css/html to depict the triangles in the correct way
if (randomIndexUsedSide === 0)
game.cardsUnused[randomIndexUnusedCard].sideDirection = game.cardsUsed[randomIndexUsedCard].sideDirection + 60;
game.cardsUnused[randomIndexUnusedCard].cardPosition[0] = game.cardsUsed[randomIndexUsedCard].cardPosition[0] - 100 * Math.sin(toRadians(game.cardsUsed[randomIndexUsedCard].sideDirection + 90));
game.cardsUnused[randomIndexUnusedCard].cardPosition[1] = game.cardsUsed[randomIndexUsedCard].cardPosition[1] + 86 * Math.cos(toRadians(game.cardsUsed[randomIndexUsedCard].sideDirection - 90));
if (randomIndexUsedSide === 1)
game.cardsUnused[randomIndexUnusedCard].sideDirection = game.cardsUsed[randomIndexUsedCard].sideDirection - 60;
game.cardsUnused[randomIndexUnusedCard].cardPosition[0] = game.cardsUsed[randomIndexUsedCard].cardPosition[0] - 100 * Math.sin(toRadians(game.cardsUsed[randomIndexUsedCard].sideDirection -90));
game.cardsUnused[randomIndexUnusedCard].cardPosition[1] = game.cardsUsed[randomIndexUsedCard].cardPosition[1] + 86 * Math.cos(toRadians(game.cardsUsed[randomIndexUsedCard].sideDirection + 90));
if (randomIndexUsedSide === 2)
game.cardsUnused[randomIndexUnusedCard].sideDirection = game.cardsUsed[randomIndexUsedCard].sideDirection + 180;
game.cardsUnused[randomIndexUnusedCard].cardPosition[0] = game.cardsUsed[randomIndexUsedCard].cardPosition[0] + 100 * Math.sin(toRadians(game.cardsUsed[randomIndexUsedCard].sideDirection - 180));
game.cardsUnused[randomIndexUnusedCard].cardPosition[1] = game.cardsUsed[randomIndexUsedCard].cardPosition[1] - 86 * Math.cos(toRadians(game.cardsUsed[randomIndexUsedCard].sideDirection - 180));
game.cardsUsed[randomIndexUsedCard].sidesStatus[randomIndexUsedSide] = 1;
game.cardsUnused[randomIndexUnusedCard].sidesStatus[randomIndexUnusedSide] = 1;
var elem = document.getElementById(game.cardsUnused[randomIndexUnusedCard].partName);// STYLE
var elemInner = elem.getElementsByTagName('div');
for (i = 0; i < elemInner.length; i++)
elemInner = elemInner[i];
elem.className = elem.className + " used"; // STYLE
//elemInner.style.transform = "rotate(" + game.cardsUnused[randomIndexUnusedCard].sideDirection + "deg)" ;
elem.style.transform =
"translate(" + game.cardsUnused[randomIndexUnusedCard].cardPosition[0] +
"px," + game.cardsUnused[randomIndexUnusedCard].cardPosition[1] +
"px)" +" rotate(" + game.cardsUnused[randomIndexUnusedCard].sideDirection + "deg)" ;
var elemA = document.getElementById(a.partName);// STYLE
elemA.className = elemA.className + " used"; // STYLE
game.useCard(game.cardsUnused[randomIndexUnusedCard]);
CSS
#game
width: 1000px;
margin:auto;
margin-top: 300px;
.triangle
display: none;
position: absolute;
width: 100px;
height:100px;
line-height: 100px;
text-align: center;
visibility: hidden;
.up
background-image: url(imgs/tri_up_red.png);
.down
background-image: url(imgs/tri_up_red.png);
.used
display: inline-block;
visibility:visible;
.hidden
visibility: hidden;
.inner
width: 100px;
height: 87px;
margin-top: 6.5px;
margin-bottom: 6.5px;
HTML
<html>
<head>
<link href="design.css" type="text/css" rel="stylesheet">
<script language="javascript" type="text/javascript" src="game.js"></script>
</head>
<body><div id="button">
<button onclick="findRandomCardPossibleToUsedCards()">add Triangle</button>
</div>
<div id="game" class="game">
<div id="A" class="triangle">
<div class="inner up"><span>A</span></div>
</div>
<div id="B" class="triangle">
<div class="inner up"><span>B</span></div>
</div>
<div id="C" class="triangle">
<div class="inner up"><span>C</span></div>
</div>
<div id="D" class="triangle">
<div class="inner up"><span>D</span></div>
</div>
<div id="E" class="triangle">
<div class="inner up"><span>E</span></div>
</div>
<div id="F" class="triangle">
<div class="inner down"><span>F</span></div>
</div>
<div id="G" class="triangle">
<div class="inner up"><span>G</span></div>
</div>
<div id="H" class="triangle">
<div class="inner down"><span>H</span></div>
</div>
<div id="I" class="triangle">
<div class="inner up"><span>I</span></div>
</div>
<div id="J" class="triangle">
<div class="inner down"><span>J</span></div>
</div>
<div id="K" class="triangle">
<div class="inner up"><span>K</span></div>
</div>
<div id="L" class="triangle">
<div class="inner down"><span>L</span></div>
</div>
<div id="M" class="triangle">
<div class="inner up"><span>M</span></div>
</div>
<div id="N" class="triangle">
<div class="inner down"><span>N</span></div>
</div>
<div id="O" class="triangle">
<div class="inner up"><span>O</span></div>
</div>
<div id="P" class="triangle">
<div class="inner down"><span>P</span></div>
</div>
<div id="Q" class="triangle">
<div class="inner down"><span>Q</span></div>
</div>
<div id="R" class="triangle">
<div class="inner down"><span>R</span></div>
</div>
<div id="S" class="triangle">
<div class="inner down"><span>S</span></div>
</div>
<div id="T" class="triangle">
<div class="inner down"><span>T</span></div>
</div>
</div>
</body>
</html>
获取可能组合的代码对我来说很好用。正如我所说，欢迎提出改进建议。我真正的问题是可视化。在 html 中，所有的 div 都是正方形，旋转和翻译这些正方形/三角形让我很头疼。正确的旋转有效，我认为使用正弦和余弦函数来确定 x 和 y 轴的平移是正确的。但不知何故，我被困住了。我不是要求任何人为我解决它，但也许有人可以向我展示不同的方法或指出我错在哪里。
【问题讨论】：
另一种可能性：moa-office.at/cloud/… 需要旋转。帖子中的图片仅代表可能性。将查看 css 三角形。如果他们可以有背景图片，这在我的情况下是需要的。 -> ***.com/questions/16535376/… 【参考方案1】：我为你创建了一个三角形，里面有内容：
我的灵感来自：https://css-tricks.com/snippets/css/css-triangle/
已编辑
我创建了一个可以移动的三角形，因为外部 div 是三角形中心的一个点。并且可以很容易地计算坐标。
我新建一个例子：
http://codepen.io/luarmr/pen/GJmjZg
使用代码http://codepen.io/luarmr/pen/MwmjqX，您可以点击三角形。
HTML
<div class="card">
<span class="value">test</span>
</div>
CSS
.card
height:0;
width:0;
position:absolute;
top:50px;
left:150px;
transition: all 2s;
.card:after
content:'';
display:block;
width: 0;
height: 0;
position:absolute;
left:-50px;
top:-45px;
z-index:1;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 90px solid #ebebeb;
transition: all 2s;
.card.turn:after
transform: rotate(180deg);
.card.turn
left:200px;
.card .value
position:absolute;
z-index:2;
top:-10px;
width:90px;
left:-45px;
text-align:center;
【讨论】：
我是用 Angular 做的，只是为了向你展示我使用这个 css 的方法：codepen.io/luarmr/pen/MwmjqX 你只需要对 ul 应用变换，用 3 个不同的类将数字放在正确的位置例子。 顺便说一句，这个游戏看起来很有趣 :) 到目前为止谢谢..明天会仔细研究一下。需要好好享受天气......等它完成后我会让你看看。【参考方案2】：找到适合我的解决方案：
我已经解决了难以定位的三角形的定位问题，方法是使用不同的旋转三角形正方形图片，而不是旋转三角形，并且很难使用 div 的 x 和 y 坐标和中心。从那里开始，它是小菜一碟。
JAVASCRIPT
function Game()
this.cardsUnused = [];
this.cardsUsed = [];
this.insert = function (obj)
this.cardsUnused.push(obj);
;
this.useCard = function (obj) // fügt ein Triangle dem Benutzen Stapel hinzu und entfernt sie vom unbenutzen Stapel
this.cardsUsed.push(obj);
this.cardsUnused.remove(obj);
;
this.unuseCard = function (obj) // fügt ein Triangle dem unbenutzebn Stapel hinzu und entfernt sie vom benutzen Stapel
this.cardsUnused.push(obj);
this.cardsUsed.remove(obj); // remove Funktion weiter unten definiert (array.prototype.remove)
;
Array.prototype.remove = function ()
var what, a = arguments, L = a.length, ax;
while (L && this.length)
what = a[--L];
while ((ax = this.indexOf(what)) !== -1)
this.splice(ax, 1);
return this;
;
var game = new Game();
// Triangle wird erstellt
function Triangle(name, sideA, sideB, sideC, directionSide, position)
this.partName = name;
this.sides = [sideA, sideB, sideC];
this.sidesStatus = [0, 0, 0];
this.sideDirection = directionSide;
this.stepUsed = 0;
this.angle = 0;
this.cardPosition = position;
this.useSide = function (side)
this.sidesStatus[side] = 1;
;
// creating 20 triangles
var a = new Triangle("A", 1, 21, 2, [60, 180, 300], [0, 0]);
var b = new Triangle("B", 2, 22, 3, [0, 0, 0], [0, 0]);
var c = new Triangle("C", 3, 23, 4, [0, 0, 0], [0, 0]);
var d = new Triangle("D", 4, 24, 5, [0, 0, 0], [0, 0]);
var e = new Triangle("E", 5, 25, 1, [0, 0, 0], [0, 0]);
var f = new Triangle("F", 6, 7, 21, [0, 0, 0], [0, 0]);
var g = new Triangle("G", 7, 26, 8, [0, 0, 0], [0, 0]);
var h = new Triangle("H", 8, 9, 22, [0, 0, 0], [0, 0]);
var i = new Triangle("I", 9, 27, 10, [0, 0, 0], [0, 0]);
var j = new Triangle("J", 10, 11, 23, [0, 0, 0], [0, 0]);
var k = new Triangle("K", 11, 28, 12, [0, 0, 0], [0, 0]);
var l = new Triangle("L", 12, 13, 24, [0, 0, 0], [0, 0]);
var m = new Triangle("M", 13, 29, 14, [0, 0, 0], [0, 0]);
var n = new Triangle("N", 14, 15, 25, [0, 0, 0], [0, 0]);
var o = new Triangle("O", 15, 30, 6, [0, 0, 0], [0, 0]);
var p = new Triangle("P", 16, 17, 26, [0, 0, 0], [0, 0]);
var q = new Triangle("Q", 17, 18, 27, [0, 0, 0], [0, 0]);
var r = new Triangle("R", 18, 19, 28, [0, 0, 0], [0, 0]);
var s = new Triangle("S", 19, 20, 29, [0, 0, 0], [0, 0]);
var t = new Triangle("T", 20, 16, 30, [0, 0, 0], [0, 0]);
// creates an array with all triangles
var triangles = [a, b, c, d, e, f, g, h, i, j, k, l, m, n, o, p, q, r, s, t];
// function to add triangles to game
function addTriangles(arr)
var x;
for (x = 0; x < arr.length; x += 1)
game.insert(triangles[x]);
// adding the triangles
addTriangles(triangles);
///// Game built up
var v = 0;
var randomIndexUsedCard, randomIndexUsedSide, randomIndexUnusedCard, randomIndexUnusedSide;
// Helper function
function toRadians(angle)
return angle * (Math.PI / 180);
game.useCard(a); // lay down first triangle
// main function that runs on click on button / max 19 times
function findRandomCardPossibleToUsedCards2()
for (v = 0; v < 19; v = v + 1)
var isTrue = 0;
while (isTrue === 0) // runs as long as no random possible card is found
randomIndexUsedCard = Math.floor(Math.random() * game.cardsUsed.length); // chooses a random triangle from triangles already used ( first time only a)
randomIndexUsedSide = Math.floor(Math.random() * 3); // chooses a random side of the randomly chosen triangle
randomIndexUnusedCard = Math.floor(Math.random() * game.cardsUnused.length); // chooses a random triangle from the unused triangles
randomIndexUnusedSide = Math.floor(Math.random() * 3); // and also a random side from the chosen unused triangle
if (typeof game.cardsUnused[randomIndexUnusedCard] === 'undefined') // hides button to choose triangle when all cards have been used
document.getElementById("button").innerHTML = "fertig";
if (game.cardsUsed[randomIndexUsedCard].sidesStatus[randomIndexUsedSide] !== 1 && game.cardsUnused[randomIndexUnusedCard].sidesStatus[randomIndexUnusedSide] !== 1)
if (game.cardsUsed[randomIndexUsedCard].sides[randomIndexUsedSide] === game.cardsUnused[randomIndexUnusedCard].sides[randomIndexUnusedSide])
isTrue = 1;
for ( var x = 0; x < 3; x = x +1)
if (randomIndexUsedSide === x)
if (game.cardsUsed[randomIndexUsedCard].sideDirection[x] === 0)
game.cardsUnused[randomIndexUnusedCard].cardPosition[0] = game.cardsUsed[randomIndexUsedCard].cardPosition[0];
game.cardsUnused[randomIndexUnusedCard].cardPosition[1] = game.cardsUsed[randomIndexUsedCard].cardPosition[1] - 87;
if (game.cardsUsed[randomIndexUsedCard].sideDirection[x] === 60)
game.cardsUnused[randomIndexUnusedCard].cardPosition[0] = game.cardsUsed[randomIndexUsedCard].cardPosition[0] - 50;
game.cardsUnused[randomIndexUnusedCard].cardPosition[1] = game.cardsUsed[randomIndexUsedCard].cardPosition[1];
if (game.cardsUsed[randomIndexUsedCard].sideDirection[x] === 120)
game.cardsUnused[randomIndexUnusedCard].cardPosition[0] = game.cardsUsed[randomIndexUsedCard].cardPosition[0] - 50;
game.cardsUnused[randomIndexUnusedCard].cardPosition[1] = game.cardsUsed[randomIndexUsedCard].cardPosition[1];
if (game.cardsUsed[randomIndexUsedCard].sideDirection[x] === 180)
game.cardsUnused[randomIndexUnusedCard].cardPosition[0] = game.cardsUsed[randomIndexUsedCard].cardPosition[0];
game.cardsUnused[randomIndexUnusedCard].cardPosition[1] = game.cardsUsed[randomIndexUsedCard].cardPosition[1] + 87;
if (game.cardsUsed[randomIndexUsedCard].sideDirection[x] === 240)
game.cardsUnused[randomIndexUnusedCard].cardPosition[0] = game.cardsUsed[randomIndexUsedCard].cardPosition[0] + 50;
game.cardsUnused[randomIndexUnusedCard].cardPosition[1] = game.cardsUsed[randomIndexUsedCard].cardPosition[1];
if (game.cardsUsed[randomIndexUsedCard].sideDirection[x] === 300)
game.cardsUnused[randomIndexUnusedCard].cardPosition[0] = game.cardsUsed[randomIndexUsedCard].cardPosition[0] + 50;
game.cardsUnused[randomIndexUnusedCard].cardPosition[1] = game.cardsUsed[randomIndexUsedCard].cardPosition[1];
if (game.cardsUsed[randomIndexUsedCard].sideDirection[x] === 360)
game.cardsUnused[randomIndexUnusedCard].cardPosition[0] = game.cardsUsed[randomIndexUsedCard].cardPosition[0];
game.cardsUnused[randomIndexUnusedCard].cardPosition[1] = game.cardsUsed[randomIndexUsedCard].cardPosition[1] - 87;
for (u = 0; u < game.cardsUnused[randomIndexUnusedCard].sideDirection.length; u = u + 1)
if (game.cardsUnused[randomIndexUnusedCard].sideDirection[u] >= 360)
game.cardsUnused[randomIndexUnusedCard].sideDirection[u] = game.cardsUnused[randomIndexUnusedCard].sideDirection[u] - 360;
if (game.cardsUnused[randomIndexUnusedCard].sideDirection[u] < 0)
game.cardsUnused[randomIndexUnusedCard].sideDirection[u] = game.cardsUnused[randomIndexUnusedCard].sideDirection[u] + 360;
game.cardsUnused[randomIndexUnusedCard].sideDirection[randomIndexUnusedSide] = game.cardsUsed[randomIndexUsedCard].sideDirection[randomIndexUsedSide] + 180;
if (game.cardsUnused[randomIndexUnusedCard].sideDirection[0] === game.cardsUnused[randomIndexUnusedCard].sideDirection[randomIndexUnusedSide])
game.cardsUnused[randomIndexUnusedCard].sideDirection[1] = game.cardsUnused[randomIndexUnusedCard].sideDirection[0] + 120;
game.cardsUnused[randomIndexUnusedCard].sideDirection[2] = game.cardsUnused[randomIndexUnusedCard].sideDirection[0] - 120;
if (game.cardsUnused[randomIndexUnusedCard].sideDirection[1] === game.cardsUnused[randomIndexUnusedCard].sideDirection[randomIndexUnusedSide])
game.cardsUnused[randomIndexUnusedCard].sideDirection[2] = game.cardsUnused[randomIndexUnusedCard].sideDirection[1] + 120;
game.cardsUnused[randomIndexUnusedCard].sideDirection[0] = game.cardsUnused[randomIndexUnusedCard].sideDirection[1] - 120;
if (game.cardsUnused[randomIndexUnusedCard].sideDirection[2] === game.cardsUnused[randomIndexUnusedCard].sideDirection[randomIndexUnusedSide])
game.cardsUnused[randomIndexUnusedCard].sideDirection[0] = game.cardsUnused[randomIndexUnusedCard].sideDirection[2] + 120;
game.cardsUnused[randomIndexUnusedCard].sideDirection[1] = game.cardsUnused[randomIndexUnusedCard].sideDirection[2] - 120;
for (w = 0; w < 3; w = w + 1)
if (game.cardsUnused[randomIndexUnusedCard].sideDirection[w] >= 360)
game.cardsUnused[randomIndexUnusedCard].sideDirection[w] = game.cardsUnused[randomIndexUnusedCard].sideDirection[w] - 360;
if (game.cardsUnused[randomIndexUnusedCard].sideDirection[w] < 0)
game.cardsUnused[randomIndexUnusedCard].sideDirection[w] = game.cardsUnused[randomIndexUnusedCard].sideDirection[w] + 360;
game.cardsUsed[randomIndexUsedCard].sidesStatus[randomIndexUsedSide] = 1;
game.cardsUnused[randomIndexUnusedCard].sidesStatus[randomIndexUnusedSide] = 1;
// STYLE STYLE
var elem = document.getElementById(game.cardsUnused[randomIndexUnusedCard].partName);
var elemUsed = document.getElementById(game.cardsUsed[randomIndexUsedCard].partName);
var elemInner = elem.getElementsByTagName('div');
for (y = 0; y < elemInner.length; y = y + 1)
elemInner = elemInner[y];
elem.className = elem.className + " used"; // STYLE
elemInner.style.backgroundImage = "url(imgs/tri" + game.cardsUnused[randomIndexUnusedCard].partName + (game.cardsUnused[randomIndexUnusedCard].sideDirection[0]) + ".png)";
console.log(game.cardsUnused[randomIndexUnusedCard].partName + (game.cardsUnused[randomIndexUnusedCard].sideDirection));
// elemInner.style.transform = "rotate(" + game.cardsUnused[randomIndexUnusedCard].sideDirection + "deg)" ;
elem.style.transform =
"translate(" + Math.floor(game.cardsUnused[randomIndexUnusedCard].cardPosition[0]) +
"px," + Math.floor(game.cardsUnused[randomIndexUnusedCard].cardPosition[1]) +
"px)"; // + " rotate(" + game.cardsUnused[randomIndexUnusedCard].sideDirection + "deg)" ;
var elemA = document.getElementById(a.partName);
elemA.className = elemA.className + " used";
game.useCard(game.cardsUnused[randomIndexUnusedCard]);
HTML
<html>
<head>
<link href="design.css" type="text/css" rel="stylesheet">
<script language="javascript" type="text/javascript" src="game.js"></script>
</head>
<body><div id="button">
<button onclick="findRandomCardPossibleToUsedCards2()">add Triangle</button>
</div>
<div id="game" class="game">
<div id="A" class="triangle">
<div class="inner up"></div>
</div>
<div id="B" class="triangle">
<div class="inner up"></div>
</div>
<div id="C" class="triangle">
<div class="inner up"></div>
</div>
<div id="D" class="triangle">
<div class="inner up"></div>
</div>
<div id="E" class="triangle">
<div class="inner up"></div>
</div>
<div id="F" class="triangle">
<div class="inner down"></div>
</div>
<div id="G" class="triangle">
<div class="inner up"></div>
</div>
<div id="H" class="triangle">
<div class="inner down"></div>
</div>
<div id="I" class="triangle">
<div class="inner up"></div>
</div>
<div id="J" class="triangle">
<div class="inner down"></div>
</div>
<div id="K" class="triangle">
<div class="inner up"></div>
</div>
<div id="L" class="triangle">
<div class="inner down"></div>
</div>
<div id="M" class="triangle">
<div class="inner up"></div>
</div>
<div id="N" class="triangle">
<div class="inner down"></div>
</div>
<div id="O" class="triangle">
<div class="inner up"></div>
</div>
<div id="P" class="triangle">
<div class="inner down"></div>
</div>
<div id="Q" class="triangle">
<div class="inner down"></div>
</div>
<div id="R" class="triangle">
<div class="inner down"></div>
</div>
<div id="S" class="triangle">
<div class="inner down"></div>
</div>
<div id="T" class="triangle">
<div class="inner down"></div>
</div>
</div>
</body>
</html>
CSS
#game
postion: relative;
width: 1000px;
margin-left:auto;
margin-right:auto;
margin-top: 300px;
.triangle
display: none;
position: absolute;
width: 100px;
height:87px;
overflow: hidden;
visibility: hidden;
.used
display: inline-block;
visibility:visible;
.hidden
visibility: hidden;
.inner
position: relative;
overflow:hidden;
width: 100px !important;
height:87px !important;
background-repeat: no-repeat;
background-origin:padding-box;
background-position: top;
margin: auto;
background-size: contain;
transform-origin: center;
opacity: 0,7;
/*border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 86px solid #ebebeb; */
#A .inner
background-image: url(imgs/triA.png);
【讨论】：
以上是关于使用 Javascript、CSS 和 HTML 进行三角形定位（欢迎使用其他方法）的主要内容，如果未能解决你的问题，请参考以下文章
仅使用 HTML、CSS 和 Javascript 进行视频编辑 [关闭]
是否可以使用 HTML、CSS 和 Javascript 构建 LibreOffice 侧边栏插件
在 html 和 css 中使用 javascript 变量
Python Flask 页面未使用外部 CSS 和 Javascript 呈现