1

我有一个接受三个输入的网页。我正在从这三个输入动态创建一个三角形（通过设置边框宽度）。我希望三角形适合页面上的 div。例如，如果输入是 500、500、300，我想减少这些以适应页面上的 div，同时保持输入的纵横比。

HTML：

<div id="triangle"></div>

CSS：

#triangle {  
  max-width: 200px;
  width: 0;
  height: 0;
  margin: 0 auto;
}

jQuery：

$("#triangle").css({
  "border-left": length1 + "px solid transparent",
  "border-right": length2 + "px solid transparent",
  "border-bottom": length3 + "px solid #2383ea"
});
4

1 回答 1

2

这是一种方法。

从以下HTML开始，两个嵌套的块元素：

<div id="triangle"><div class="inner"></div></div>

和一些基本的CSS：

body {
    margin: 0;
}
#triangle {
    border: 1px dotted gray;
    max-width: 400px;
    margin: 0 auto;
}
#triangle .inner {
    width: 0;
    height: 0;
}

现在使用以下 jQuery/JavaScript：

var length1 = 1500;
var length2 = 1500;
var length3 = 1500;

var maxWidth = parseInt($("#triangle").css("max-width"));

var baseWidth = Math.min($("#triangle").width(),maxWidth);
var scale = baseWidth/(length1+length2);

$("#triangle .inner").css({
  "border-left": length1*scale + "px solid red",
  "border-right": length2*scale + "px solid green",
  "border-bottom": length3*scale+ "px solid #2383ea"
});

您可以在以下位置查看演示：http: //jsfiddle.net/audetwebdesign/WVcvj/

编程笔记

您将输入length1,length2和length3从表格或其他东西。

默认情况下，#triangle将采用父容器的宽度，因此如果它小于最大宽度，则使用该宽度（您可以使用该.css函数获取该值）。该parseInt()函数将删除px该值附带的标签。

三角形底边的宽度为length1+length2，因此计算可用宽度与指定宽度的比率。

然后你将三个边框宽度标准化，你就完成了！

于 2013-08-24T01:34:42.417 回答