logo标签列表

如何在边框上放置文本？（HTML，CSS）

htmlcss
16
我已经堆叠了我的div，让它们看起来像展开的纸张。我想在每个div上放置文本，将它们分成几个部分。
但是我制作的div的方式，只有边框是可见的。当我向div添加文本时，文本出现在应该显示的位置上方或下方（因为它们在不可见的div上）。
基本上，我的div是不可见的。我的边框是可见的。我需要文本出现在边框上。但要做到这一点，我必须为每个文本块更改填充。是否有一种方法可以仅将文本放在边框上？或者是否有更简单的方法来获得倾斜的div？
我尝试过rotateY，但它只会使它们缩小。
注意-我只能使用HTML和CSS。
这是当前外观的屏幕截图：

![screenshot of current appearance

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">&#x2039;</label>
<label for="img-12" class="next">&#x203a;</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>
3
你能展示一下你的HTML结构吗？ - Santiago Hernández
CSS与HTML密切配合，因此尽管有CSS，缺少的是HTML。您能否复制页面的HTML源代码并更新问题以包含此内容？谢谢。 - clarity123
1个回答
4

我个人建议不要使用边框选项（有点hacky）而选择其他更简单的方法。以下是几个选项：

1）使用CSS3 3D变换

你尝试过这种方法，但它没有生效。从你在问题中提到的情况来看，当你使用rotateY时（它只会缩小），似乎是因为你没有与perspective结合使用。一旦你这样做了（并且稍微调整一下值使其适应你想要的效果），不仅div会变形，而且它的内容也会变形，使其看起来像是在同一个角度上呈现出纸张效果。

以下是一个示例（同时也可以在此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背景中，其余内容将放置在图像上方。

请参见此演示（也可在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上有一些问题需要调整）。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接