Question

我试图设置我的HTML背景，它看起来像是由两个三角形组成，但我似乎无法让它完全适合页面。我如何实现这一目标，另外还能为两者设置自定义颜色？

以下是我正在使用的代码：

＆＃13;

#container {
  position: relative;
  height: 800px;
  width: 800px;
  overflow: hidden;
  background: grey;
  margin-left: -0.4%;
  margin-top: -0.4%;
}

#container:before { 
  content: '';
  position: absolute;
  left: 28%;
  top: 28%;
  width: 1200px; 
  height: 1200px; 
  background-color: rgb(255, 255, 255); /* fallback */
  background-color: rgba(255, 255, 255, 0.5);
  -webkit-transition: all 1s;
  -moz-transition: all 1s;
  transition: all 1s;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  transform: rotate(45deg);
}

＆＃13;

<div id="container"></div>

＆＃13;

我尝试将所有高度和宽度更改为100vh和100vw，但这似乎没有帮助，并且没有选项可以更改颜色。任何帮助将不胜感激！

Answer 1

http://jsfiddle.net/Liamm12/kkt1kd34/

我希望你想做什么

我刚设置身高：100％;和宽度：100％;该页面将采用全屏

我们应该将min-height：100％添加到容器中，这将有助于身体全屏

最后我只是将padding-bottom添加到容器中：之后它将设计为三角形

＆＃13;

<!doctype html>
<html>
   <head>
      <title></title>
   </head>
   <body>
      <div id="container"></div>
   </body>
</html>

＆＃13;

nvcc

＆＃13;

Answer 2

为了回答这个问题，我使用了多种技术：

创建纵横比框：这是第二步所必需的（因为我需要一个正方形才能工作。有关详细信息，请查看以下内容：Aspect Ratio Boxed
我使用CSS边框三角形来提供您要求的内容。在此处查找更多详细信息：CSS Triangle

所以我所做的就是创建一个方框，设置边框以制作箭头。我也让jsfiddle让你仔细研究。

https://jsfiddle.net/vqmjyjhw/

我还在顶部添加了css变量，以帮助您在需要时快速修改框：

:root {
  --width: 100%;
  --halfWidth: 242px;
  --topColor: red;
  --bottomColor: blue;
}

使用width变量，您可以使用％。但是为了使技巧起作用，halfWidth需要在px中。您可以使用一些额外的javascript来准确计算容器的宽度，以正确设置halfWidth。

Answer 3

您可以使用background: linear-gradient()：

执行此操作

＆＃13;

html, body {width:100vw;height:100vh;margin:0}

body {
  background: -webkit-gradient(linear, left top, right bottom, color-stop(50%, Salmon), color-stop(50%, Khaki));
  background: -webkit-linear-gradient(top left, Salmon 50%, Khaki 50%);
  background: -o-linear-gradient(top left, Salmon 50%, Khaki 50%);
  background: linear-gradient(to bottom right, Salmon 50%, Khaki 50%);
}

＆＃13;

将HTML背景设置为两个三角形

3 个答案: