1

I am trying to making Left Slanted Stripe with CSS.

I don't know how to make both ends not to show clearly like below image that I attached.

ideas for Left Slanted Stripe

Can I repeat as Counting Numbers of Image with CSS?

Can I get some help?

.stripe {
  width: 100%;
  height: 2em;
  background: slategray;
  background-image: url(https://i.stack.imgur.com/qVP44.png), url(https://i.stack.imgur.com/ogF3W.png);
  background-size: 1em, 1em;
  background-position: left bottom, 0.5em bottom;
  background-repeat: repeat-x, repeat-x;
}
<div class="stripe"></div>

stripe unit green

stripe unit orange

when adapted to paragraph with span

Adapting A Haworth Answer to ...

It isn't work.. Don't know why the reason...

.stripe,
.stripe::before,
.stripe::after {
  margin: 0;
}

.stripe {
  width: 100%;
  height: 2em;
  position: relative;
  margin: 0;
  nt-size: 50px;
}

.stripe::before,
.stripe::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: -1;
}

.stripe::after {
  height: .72em;
  /* depends on the slope */
  background-image: url(https://i.stack.imgur.com/qVP44.png), url(https://i.stack.imgur.com/ogF3W.png);
  background-size: 1em, 1em;
  background-position: left bottom, 0.5em bottom;
  background-repeat: repeat-x, repeat-x;
  clip-path: polygon(.72em 0, 100% 0, calc(100% - .72em) 100%, 0 100%);
}

.stripe::before {
  background-color: slategray;
  height: 100%;
}
<h2>in span</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac tellus nunc. Phasellus imperdiet leo metus, et gravida lacus. Donec metus ligula, elementum at pellentesque pellentesque, suscipit ac nunc. Etiam lobortis, massa ac aliquam auctor, augue nisl sagittis urna, at dapibus tellus erat ullamcorper ligula. Praesent orci dui, pulvinar id convallis a, faucibus non mauris. Donec tellus augue, tempus sed facilisis sed, fringilla quis leo. Mauris vulputate, leo ac facilisis vulputate, enim orci interdum augue, in blandit quam turpis quis dui. <span class="stripe">Morbi dictum luctus velit nec faucibus. Cras vitae tortor purus, ut tincidunt mauris.</span> Sed at velit nisl. Donec eu mauris tortor, interdum condimentum erat. Nam egestas turpis eget nibh laoreet pharetra. Suspendisse a sem eros, ut pulvinar enim. In sed elit eu nulla accumsan tincidunt eget sit amet ipsum. Nullam ut massa rutrum dolor placerat tempor accumsan eget purus.</p>

<h2>in div</h2>
<div class="stripe">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac tellus nunc. Phasellus imperdiet leo metus, et gravida lacus. Donec metus ligula, elementum at pellentesque pellentesque, suscipit ac nunc. Etiam lobortis, massa ac aliquam auctor, augue nisl sagittis urna, at dapibus tellus erat ullamcorper ligula. Praesent orci dui, pulvinar id convallis a, faucibus non mauris. Donec tellus augue, tempus sed facilisis sed, fringilla quis leo. Mauris vulputate, leo ac facilisis vulputate, enim orci interdum augue, in blandit quam turpis quis dui. <span class="stripe">Morbi dictum luctus velit nec faucibus. Cras vitae tortor purus, ut tincidunt mauris.</span> Sed at velit nisl. Donec eu mauris tortor, interdum condimentum erat. Nam egestas turpis eget nibh laoreet pharetra. Suspendisse a sem eros, ut pulvinar enim. In sed elit eu nulla accumsan tincidunt eget sit amet ipsum. Nullam ut massa rutrum dolor placerat tempor accumsan eget purus.</div>
arborsday
  • 11
  • 2
  • You are going to need to build in some info about the stripes - e.g. the angle and the aspect ratio so it won't be a general purpose solution. Is that acceptable? – A Haworth May 31 '22 at 16:42
  • Also I notice that your diagram and the image are not consistent with each other. The diagram ensures that the top right point of the last stripe is at the edge while the image you show has the last stripe ending before it touches the end of the element. This is inevitable if you size in something other than vw (or %) units and you are sizing in em. Which outcome do you want? – A Haworth May 31 '22 at 16:57

1 Answers1

0

You can put the stripey background and the gray background onto after and before pseudo elements, and clip the stripey one so that the odd bits of stripe at the two ends are removed.

Note: the widths here are based on the slope/relative size of the stripey images. Things will scale OK if for example the font-size is changed (in fact, if you put the font-size to something big in .stripe you can check that the clipping is working better).

.stripe,
.stripe::before,
.stripe::after {
  margin: 0;
}

.stripe {
  width: 100%;
  height: 20em;
  position: relative;
  margin: 0;
  nt-size: 50px;
}

.stripe::before,
.stripe::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: -1;
}

.stripe::after {
  height: .72em;
  /* depends on the slope */
  background-image: url(https://i.stack.imgur.com/qVP44.png), url(https://i.stack.imgur.com/ogF3W.png);
  background-size: 1em, 1em;
  background-position: left bottom, 0.5em bottom;
  background-repeat: repeat-x, repeat-x;
  clip-path: polygon(.72em 0, 100% 0, calc(100% - .72em) 100%, 0 100%);
}

.stripe::before {
  background-color: slategray;
  height: 100%;
}
<div class="stripe"></div>
A Haworth
  • 30,908
  • 4
  • 11
  • 14
  • Thank you so much of your effort and kindness! If I adapted to part of paragraph with as below, when the viewport width is shorten than sentence length, some part are not adapted this class. May I ask you the reason why?

    Mauris vulputate, leo ac facilisis vulputate, enim orci interdum augue, in blandit quam turpis quis dui. Morbi dictum luctus velit nec faucibus. Cras vitae tortor purus, ut tincidunt mauris. Sed at velit nisl. Donec eu mauris tortor, interdum condimentum erat.

    https://i.stack.imgur.com/GQdJt.jpg     – arborsday May 31 '22 at 22:33
  • How are you adapting the code? The requirement for it to deal with spans I think came into the question after I had answered. I would not expect the code to work with such elements but I haven’t thought about it. Your picture shows there is some assumption about height. How would you define that? – A Haworth Jun 01 '22 at 03:46
  • Sorry not to mention that earlier stage.. I couldn't considerate about it. About the height, I plan to stick along with

    Line Height. I don't know how describe more precisely.. I updated your code to Question Snippet 2. Thanks for your kindness again!

     – arborsday Jun 01 '22 at 10:43
  • Your picture shows the stripey background considerably below the baseline of the line. So what is the height that you want it to be? Obviously lineheight isn't enough. Perhaps more like 2 * lineheight? – A Haworth Jun 01 '22 at 10:46