Dynamic & Responsive Trapezoid Text Div

Question

I'm stuck on a special design, I need to get this effect, keeping in mind that the text could be changed (since it's a wordpress website) to be on one or many lines. http://postimg.org/image/ibqntp9t1/ I achieved this effect using pseudo elements and here is my code : 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;
    }

The problem is that when the content changes (example: one line of text), the height of the "before" thing does not change ... Any help ? Thanks

EDIT: Solution provided below isn't working properly (not even working on firefox)

What effect are you talking about? the slanted edge of the black box? — codedude, Jul 07 '15 at 13:44
to the width and height if possible look at this example: http://postimg.org/image/5b3674uqj/ — Bassem, Jul 07 '15 at 13:54

Stewartside · Answer 1 · 2015-07-07T14:06:52.840

4

You can do this with CSS clip-path to create the shape. The more lines you add, the higher the shape becomes.

You just need to amend the first part of the clip-path to say how far indented the shape is and then amend the padding on the p tag.

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

edited Jul 07 '15 at 14:06

answered Jul 07 '15 at 14:01

Stewartside

20,378
12
60
81

1

How can I get the width proportional with the text inside the container please? – Bassem Jul 07 '15 at 14:24
Remove the width and add `display: inline-block;`. You may want to add some padding to the text or set a minimum width though as it can sometimes look out of shape. – Stewartside Jul 07 '15 at 16:06
1

Ok thanks, the problem now is that your solution does not work on Firefox... – Bassem Jul 07 '15 at 18:38

Paulie_D · Accepted Answer · 2015-07-07T14:07:01.593

2

If you do all the values in em then the pseudo-element border triangle will react to changes in font size.

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

Building on the excellent answer from @Stewartside, the clip path can be applied to the pseudo-element.

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

edited Jul 07 '15 at 14:07

answered Jul 07 '15 at 13:53

Paulie_D

107,962
13
142
161

1

Thank you for your help but it's not working when using more than one line of text... – Bassem Jul 07 '15 at 14:00
1

What is the difference between the solution Stewartside provided and yours ? – Bassem Jul 07 '15 at 14:11
good shout. +1. I do prefer using P elements or some form of text element though for any text to be displayed for semantic, accessibility and SEO purposes. – Stewartside Jul 07 '15 at 14:11
None directly except I use a pseudo-element so the text doesn't get clipped. – Paulie_D Jul 07 '15 at 14:12
@Stewartside Absolutely, but any block (or inline-block) element would work the same. The div was just for example. a `h1` would work just as well. Good idea with the clip-path. – Paulie_D Jul 07 '15 at 14:13
@Paulie_D yeah true, just clarifying :) – Stewartside Jul 07 '15 at 14:14
1

How can I get the width proportional with the text inside the container please? – Bassem Jul 07 '15 at 14:33
What do you mean....you want the arrow to be % width of the whole element? Yeah you can do that - http://jsfiddle.net/zof5fjhr/1/ – Paulie_D Jul 07 '15 at 14:35
1

Thank you. The solution for the slanted edge isn't working on firefox... – Bassem Jul 07 '15 at 14:56
I found a fix for firefox – Bassem Aug 09 '15 at 10:14

Dynamic & Responsive Trapezoid Text Div

2 Answers2