动态和响应式梯形文本 Div

Question

我被困在一个特殊的设计上，我需要获得这种效果，请记住文本可以更改为一行或多行（因为它是一个 wordpress 网站）。 http://postimg.org/image/ibqntp9t1/ 我使用伪元素实现了这种效果，这是我的代码： CSS:



    .box {
        background-color: #000;
    } 
    .box:before {
        content:'';
        border-top: 100px solid transparent;
        border-right: 28px solid #000;
        width: 0px;
        height: 0px;
        position: absolute;
        top:0px;
        left: -13px;
    }

问题是当内容改变时（例如：一行文本），“之前”的东西的高度不会改变...... 有什么帮助吗？谢谢

编辑：下面提供的解决方案无法正常工作（甚至无法在 Firefox 上工作）

Answer 1

如果你完成em中的所有值，那么伪元素边框三角形将对字体大小的变化做出反应。

.box {
  background-color: #000;
  color: white;
  display: inline-block;
  position: relative;
  line-height: 2em;
  padding: 0 1em;
  margin: 0 2em;
  vertical-align: top;
}
.box:before {
  content: '';
  border: 1em solid transparent;
  border-right-color: #000;
  border-bottom-color: #000;
  width: 0px;
  height: 0px;
  position: absolute;
  right: 100%;
  top: 0;
}
.larger {
  font-size: 24px;
}

<div class="box">Standard</div>
<div class="box larger">I'm larger</div>

基于@Stewartside 的出色回答，剪辑路径可以应用于伪元素。

.box {
  background-color: #000;
  color: white;
  display: inline-block;
  max-width: 250px;
  position: relative;
  line-height: 2em;
  padding: 0 1em;
  margin: 0 2em;
  vertical-align: top;
}
.larger {
  font-size: 24px;
}
.box:before {
  content: '';
  background: inherit;
  width: 2em;
  height: 100%;
  -webkit-clip-path: polygon(50% 0%, 100% 0, 100% 100%, 0% 100%);
  clip-path: polygon(50% 0%, 100% 0, 100% 100%, 0% 100%);
  position: absolute;
  right: 100%;
  top: 0;
  margin-right:-1px; /* tweak due to antialias issue ? */
}

<div class="box">lorem</div>
<div class="box larger">Lorem ipsum dolor sit amet.</div>

Answer 2

您可以使用 CSS clip-path 来创建形状。添加的线条越多，形状就越高。

您只需要修改 clip-path 的第一部分，说明形状缩进了多远，然后修改 p 标签上的 padding。

.container {
  width: 400px;
  background: black;
  color: white;
  -webkit-clip-path: polygon(15% 0%, 100% 0, 100% 100%, 0% 100%);
  clip-path: polygon(15% 0%, 100% 0, 100% 100%, 0% 100%);
}
.container p {
  padding-left: 15%;
}

<div class="container">
  <p>
    Test
    <br />test
  </p>
</div>

<br />

<div class="container">
  <p>
    Test
    <br />test
    <br />test
    <br />test
    <br />test
    <br />test
    <br />test
  </p>
</div>

动态和响应式梯形文本 Div

Dynamic & Responsive Trapezoid Text Div

css

css-shapes