我将我的 div 堆叠起来，看起来像展开的纸。我想在每个 div 上放置文本，将它们分成几个部分。
但是我制作 div 的方式中，唯一可见的部分是边框。当我向 div 添加文本时，文本出现在应显示的上方或下方(因为它们位于不可见的 div 上)。
基本上，我的 div 是不可见的。我的边界是可见的。我需要文本出现在边框上。但为此，我必须更改每个文本 block 的填充。有没有办法把文字放在边框上？或者是否有更简单的方法来获取倾斜的 div？
我试过 rotateY 但它只会让它们缩小。
问题 -- 我只能使用 HTML 和 CSS。
这是当前显示方式的屏幕截图:
CSS:
#slant1 {
width: 700px;
height: 225px;
background-color: white;
font-family: thorndale for vst;
font-size: 16px;
}
#slant2 {
border-top: 260px solid #F2F2F2;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
height: 2600px;
width: 600px;
position: absolute;
z-index: -1;
}
#slant3 {
border-bottom: 225px solid #E6E6E6;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
height: 225px;
width: 600px;
font-family: thorndale for vst;
font-size: 16px;
}
#slant4 {
border-top: 225px solid #F2F2F2;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
height: 225px;
width: 600px;
}
<!DOCTYPE html>
<html lang="en" id="Origami">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Origami</title>
<link href="discover.css" rel="stylesheet" type="text/css" />
<meta name="description" content="Origami" />
<meta name="keywords" content="Origami">
<meta name="author" content="JojoRae" />
</head>
<body>
<div id="columnwrapper2">
<div id="slant1">
<div class="adamas1"></div> <div class="adamas"></div>
<p class="p">
</p>
</div>
<div id="slant2">
<ul class="slides">
<input type="radio" name="group3" id="img-11" checked />
<li class="slide-container">
<div class="slide">
<img src="../ei/treasure.gif" />
</div>
<div class="nav">
<label for="img-15" class="prev">‹</label>
<label for="img-12" class="next">›</label>
</div>
</li>
</ul>
</div>
<div id="slant3">
<div class="adamas3"></div>
<p class="p2"></p>
</div>
<div id="slant4">
</div>
</div> <!--closes columnwrapper-->
</body>
</html>
最佳答案
我个人会省略边框选项(这有点老套)并选择不同的东西(可能更容易)。这里有几个选项:
1) 使用 CSS3 3D 转换
你试过这个，但没用。从你在问题中所说的，你在使用 rotateY 时发现的问题(它只是缩小了)似乎是因为你没有将它与 perspective 结合使用.一旦你这样做了(并稍微调整一下值，使它们适应你正在寻找的东西)，不仅 div 会倾斜，而且它的内容也会使它看起来像在同一个 Angular 作为纸张效果。
这是一个例子(also available on this JSFiddle):
html, body {
background:#444;
}
#columnwrapper2 {
min-width:700px;
}
.slant {
margin:auto auto;
}
#slant1 {
width: 700px;
height: 225px;
background-color: white;
font-family: thorndale for vst;
font-size: 16px;
}
#slant2 {
width:655px;
height:225px;
background:#eee;
transform: perspective(600px) rotateX(-20deg);
}
#slant3 {
width:668px;
height:225px;
background:#ddd;
transform: perspective(600px) rotateX(20deg) translateY(-33px);
}
#slant4 {
width:642px;
height:225px;
background:#eee;
transform: perspective(600px) rotateX(-20deg) translateY(-33px);
}<div id="columnwrapper2">
<div id="slant1" class="slant">
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris mi odio, fermentum eget ex sed, tincidunt consectetur enim. Suspendisse viverra commodo ultrices. In eu facilisis leo, quis consectetur ex. Nam congue fringilla elit, ac mattis velit dictum ac. Donec tincidunt placerat ligula fermentum vulputate. Sed malesuada orci sit amet enim euismod, et euismod nunc pretium. Ut molestie et sem eu consectetur. Praesent fringilla elit enim, a convallis nulla sodales id. Sed tristique cursus libero. Cras ac magna id nisl pulvinar iaculis eu sit amet velit.
</div>
</div>
<div id="slant2" class="slant">
<div>
<img src="http://lorempixel.com/500/200/people" alt="Random Picture" />
</div>
</div>
<div id="slant3" class="slant">
<div>
Vivamus interdum facilisis justo ut fermentum. Cras turpis diam, efficitur sit amet mi sit amet, dapibus fermentum odio. Aenean fermentum tincidunt placerat. Vivamus dictum, diam quis elementum laoreet, lacus ex consectetur neque, eget fringilla ipsum neque nec sem. Ut eget venenatis urna, quis feugiat orci. Pellentesque vel interdum ante. Nulla blandit ex quam, non sollicitudin lectus laoreet nec. Integer vitae finibus elit. Duis pellentesque turpis odio, sit amet convallis libero blandit et. Maecenas accumsan est eros, vel scelerisque nulla scelerisque sit amet.
</div>
</div>
<div id="slant4" class="slant">
<div>
Duis non placerat nisi, in maximus tellus. Nullam in interdum nunc, sed tempus nunc. Suspendisse lorem nisi, blandit vel odio ac, varius rhoncus sem. Phasellus quis placerat enim, id iaculis eros. Nunc at egestas nisi. Nulla in dui mattis, lacinia lectus ac, commodo ligula. Fusce fringilla vitae magna sit amet dignissim. Fusce quis elit elementum, faucibus eros id, facilisis mi. In vitae accumsan tellus. Quisque venenatis lacus urna, volutpat luctus eros feugiat id. Duis pretium pulvinar molestie. Nulla eget rhoncus sapien.
</div>
</div>
</div> <!--closes columnwrapper-->2) 使用 SVG
另一种选择是使用 SVG。如果您不希望文本因折纸效果(或不需要玩数字的效果)而倾斜，这可能是一种更简单的选择。不过，这将要求您知道每个部分的确切高度。
您可以在 SVG 中创建一个图像(直接作为图像或如下代码)，并将其放在 #columnwrapper2 的背景中，其余内容将位于图像之上.
查看此演示 ( also available on this JSFiddle ):
html, body {
background:#444;
}
#columnwrapper2 {
width:700px;
position:relative;
}
.slant {
margin:auto auto;
height:250px;
width:600px;
padding:50px auto;
z-index:2;
position:relative;
}<div id="columnwrapper2">
<svg width="700px" height="1000px" style="position:absolute;top:0;left:0;z-index:1;">
<path fill="#ffffff" d="M0,0 700,0 700,250 0,250Z" />
<path fill="#eeeeee" d="M0,250 700,250 650,500 50,500Z" />
<path fill="#dddddd" d="M50,500 650,500 700,750 0,750Z" />
<path fill="#eeeeee" d="M0,750 700,750 650,1000 50,1000Z" />
</svg>
<div id="slant1" class="slant">
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris mi odio, fermentum eget ex sed, tincidunt consectetur enim. Suspendisse viverra commodo ultrices. In eu facilisis leo, quis consectetur ex. Nam congue fringilla elit, ac mattis velit dictum ac. Donec tincidunt placerat ligula fermentum vulputate. Sed malesuada orci sit amet enim euismod, et euismod nunc pretium. Ut molestie et sem eu consectetur. Praesent fringilla elit enim, a convallis nulla sodales id. Sed tristique cursus libero. Cras ac magna id nisl pulvinar iaculis eu sit amet velit.
</div>
</div>
<div id="slant2" class="slant">
<div>
<img src="http://lorempixel.com/500/200/people" alt="Random Picture" />
</div>
</div>
<div id="slant3" class="slant">
<div>
Vivamus interdum facilisis justo ut fermentum. Cras turpis diam, efficitur sit amet mi sit amet, dapibus fermentum odio. Aenean fermentum tincidunt placerat. Vivamus dictum, diam quis elementum laoreet, lacus ex consectetur neque, eget fringilla ipsum neque nec sem. Ut eget venenatis urna, quis feugiat orci. Pellentesque vel interdum ante. Nulla blandit ex quam, non sollicitudin lectus laoreet nec. Integer vitae finibus elit. Duis pellentesque turpis odio, sit amet convallis libero blandit et. Maecenas accumsan est eros, vel scelerisque nulla scelerisque sit amet.
</div>
</div>
<div id="slant4" class="slant">
<div>
Duis non placerat nisi, in maximus tellus. Nullam in interdum nunc, sed tempus nunc. Suspendisse lorem nisi, blandit vel odio ac, varius rhoncus sem. Phasellus quis placerat enim, id iaculis eros. Nunc at egestas nisi. Nulla in dui mattis, lacinia lectus ac, commodo ligula. Fusce fringilla vitae magna sit amet dignissim. Fusce quis elit elementum, faucibus eros id, facilisis mi. In vitae accumsan tellus. Quisque venenatis lacus urna, volutpat luctus eros feugiat id. Duis pretium pulvinar molestie. Nulla eget rhoncus sapien.
</div>
</div>
</div> <!--closes columnwrapper-->SVG 的一个优点是大多数浏览器都支持它(使用以前的 transform 解决方案，您可能会发现 IE 的一些问题需要调整)。
关于html - 如何在边框上放置文本？ (HTML, CSS)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34258466/