繁体 English 中英

在html和css中创建两个不同背景的三角形

[英]Triangles to make two different backgrounds in html and css

原文 2016-02-18 15:57:31 2 1 html/ css/ background/ positioning

我正在尝试创建类似此图片的内容

我试图用两个div创建两个不同的三角形，并设法将它们粉碎在一起以实现此目的，但是我不知道如何将文本放入其中以使其看起来像此图像。 我什至不确定这种方法是否正确。 任何改进将不胜感激。

 #top { width: 0; height: 0; border-top: 300px solid tomato; border-right: 600px solid transparent; display: inline; display: table-cell; position: relative; } #bottom { width: 0; height: 0; border-bottom: 300px solid skyblue ; border-left: 600px solid transparent; display: inline; display: table-cell; position: absolute; top: 8px; }

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> </head> <body> <div id="top"> </div> <div id="bottom"> </div> </body> </html>

1 个解决方案

我做了一个小提琴： https : //jsfiddle.net/Sprazer/hk9761u9/非常基本，尚未响应

编辑响应： https : //jsfiddle.net/Sprazer/hk9761u9/

h2 span{
  width: 50%;
  text-align: center;
  display: block;
  float: left;
}
h2{
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
 -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  z-index: 5  ;
  text-align: center;
  font-size: 50px;
  margin: 0;
}