css - 如何让我的文本进入我的 CSS 形状？

Question

我正在尝试学习如何使用 :before 将文本放入我的形状中，但是我被卡住了，不确定它实际上是如何工作的。

这是基本设置:

<div class="trapezoid"> Hello </div>

与

div {
    border-top: 100px solid blue;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    height: 0;
    width: 100px;
  position: relative;
}

div:before {
  position: absolute;
  top:0;
  height:0;
  width: 100%;
}

但是，文本显示在形状下方。这是我的 fiddle :http://jsfiddle.net/om2wf48t/

Answer 1

示例代码:http://codepen.io/skylarjhdownes/pen/mAPwKW

所以，基本上这里发生的事情是您正在创建一个包含单词“Hello”的 div，然后将几个 css 规则应用到页面上的所有 div。

将您的文本放入形状内的一个非常简单的答案是“将 border-top 更改为 border-bottom 。”，但这会反转您的梯形并且实际上并没有使用您要学习的技巧。

正如 Ankith 指出的那样，阻止您使用该技巧的主要因素是您缺少 content您的属性(property) div:before堵塞。查看MDN's examples对于 before: ，他们都有一个。如果您从 <div> 中删除文本“Hello”标记并放置 content:"Hello.";在你的div:before那么您将到达一半，但您的文字不会移动。接下来，您需要将 top 属性更改为非零值，以便您的文本移动。 top:-20px甚至更好，top:-2em会将您的文字放在梯形内。

奖励:您的原始代码中有几件事实际上没有做任何事情。例如，如果您删除 div:before block 中的所有内容，它不会更改您的页面。也不会删除 class="trapezoid" .

你的 class="trapezoid"代码是个好主意。如果你改变 div至 div.trapezoid在你的 CSS 中，然后是 class="trapezoid"将是相关的，并且您可以控制页面中的哪些 div 上有梯形。