J.T. J.T. - 3 months ago 14
CSS Question

Repeating a character to create a border?

I'm in a pickle. The website I am coding has a design element that consists of a series of forward slashes bordering the bottom of each header. Currently I have the design as a background image for the H* tags, but it's not quite working for some widths and there is cropping...

enter image description here

I want it so that the slashes aren't cropped, but for the life of me I cannot figure this out with just CSS & HTML. I would be fine with this if all the headers on the website are the same width, but they vary (plus, there is responsiveness to consider).

Any ideas? Thanks!

Edit: CSS that I have tried...

https://jsfiddle.net/be5fcwjn/1/

h4 {padding: 0 0 52px 0; background: url('https://s4.postimg.org/4kmb83h19/slashes.png') 50% 100% no-repeat; background-size: auto 17px; color: #008ea8; font-size: 1.571em; font-weight: 600; letter-spacing: 1px; text-align: center;}


And another attempt:

https://jsfiddle.net/jznfbvuw/1/

h4 {
padding: 0 0 52px 0; color: #008ea8; font-size: 1.571em; font-weight: 600; letter-spacing: 1px; text-align: center;
border-style: solid;
border-width: 0px 0px 17px;
-moz-border-image: url('https://s3.postimg.org/s2ikelx9f/slash.png') 0 0 17 repeat;
-webkit-border-image: url('https://s3.postimg.org/s2ikelx9f/slash.png') 0 0 17 repeat;
-o-border-image: url('https://s3.postimg.org/s2ikelx9f/slash.png') 0 0 17 repeat;
border-image: url('https://s3.postimg.org/s2ikelx9f/slash.png') 0 0 17 fill repeat;
}

Answer

Here is a pure CSS solution using pseudo selector ::before and ::after. One for the stripes and the other acts as a mask to hide last character:

body {
  font-family: sans-serif;
  background: #FFF;
}

.title {
  color: #01c0e3;
  display: inline-block;
  position: relative;
  padding: 0 0.5em 1em 0;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
}

.title::before, .title::after {
content: '//////////////////////\
////////////////////////////////\
////////////////////////////////\
////////////////////////////////';
  display: block;
  width: 10%;
  position: absolute;
  height: 100%;
  bottom: -70%;
  font-size: 0.6em;
  font-style: italic;
  letter-spacing: 2px;
}

.title::before {
    content: '/';
    width: 10px;
    z-index: 1;
    background: white;
    right: 5px;
    transform: rotate(25deg);
    opacity: 1;
    color: transparent;
}
<h1 class="title">Featured News + Events</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta voluptas sapiente vitae consectetur ipsa assumenda repellat, recusandae hic, cupiditate obcaecati, officia quod itaque aliquid veniam quia natus iure dignissimos pariatur.</p>

<h2 class="title">Lorem Ipsum</h2>
<p>Suscipit animi tenetur cupiditate ducimus, tempora molestias autem ab voluptate nostrum aspernatur deserunt tempore necessitatibus vero eligendi at dolorem asperiores, natus nesciunt error odit consequatur, esse veniam. Illum molestiae, veniam?</p>

<h3 class="title">Repeating a character with CSS</h3>
<p>At consequuntur, tempora blanditiis dolorem vero! Temporibus nemo cupiditate alias perspiciatis maiores perferendis, quasi, autem ab dolorum, fuga adipisci fugiat accusantium. Eos possimus excepturi tenetur, commodi minima blanditiis esse ratione.</p>

jsFiddle: https://jsfiddle.net/azizn/mxt6pgp6/