Question

我有一个接受三个输入的网页。我从这三个输入动态创建一个三角形（通过设置边框宽度）。我希望三角形适合页面上的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"
});

Answer 1

这是一种方法。

从以下 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，因此请计算可用宽度与指定宽度的比率。

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

动态创建div中最大宽度/适合的三角形

1 个答案:

编程说明