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

您可以使用CSS clip-path执行此操作以创建形状。您添加的线越多，形状就越高。

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

.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>

Answer 2

如果您执行em中的所有值，则伪元素边框三角形将对字体大小的变化做出反应。

＆＃13;

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

＆＃13;

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

＆＃13;

基于@Stewartside的优秀答案，剪辑路径可以应用于伪元素。

＆＃13;

.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 ? */
}

＆＃13;

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

＆＃13;

动态＆amp;响应式梯形文字区

2 个答案: