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%;
}

但是，文字显示在形状下方。这是我的小提琴：http://jsfiddle.net/om2wf48t/

Answer 1

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

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

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

正如Ankith指出的那样，阻止你使用这个技巧的主要原因是你错过了content块中的div:before属性。查看before: <div>，他们都有一个。如果您从content:"Hello.";标记中删除“Hello”文本并将div:before放入top:-20px，那么您将在那里，但您的文字不会移动。接下来，您需要将top属性更改为非零值，以便文本移动。 top:-2em甚至更好，class="trapezoid"会将您的文字放在梯形内。

加成：原始代码中有几件事情并没有真正做到。如果删除div中的所有内容：例如，在阻止之前，它将不会更改您的页面。也不会删除class="trapezoid"。

你的div代码是个好主意。如果您在css中将div.trapezoid更改为class="trapezoid"，则login(email:string, password:string) { let headers = new Headers(); headers.append('Content-Type', 'application/json'); headers.append('X-CSRFToken', this.getCookie('csrftoken')); return this.http .post( '/accounts/login', JSON.stringify({ email, password }), { headers } ).map(response => console.log(response)) }将具有相关性，您可以控制页面中哪些div具有梯形。

如何将我的文本放入CSS形状中？

1 个答案: