Question

我在泡菜中。我编码的网站有一个设计元素，包含一系列与每个标题底部接壤的正斜杠。目前我将设计作为H *标签的背景图像，但它对于某些宽度并不是很有效，而且还有裁剪......

我想要它，以便不会裁剪斜线，但对于我的生活，我无法用CSS＆amp; HTML。如果网站上的所有标题都是相同的宽度，我会很好，但它们会有所不同（另外，还有考虑的响应性）。

有什么想法吗？谢谢！

编辑：我尝试过的CSS ......

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

另一次尝试：

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 1

这是一个使用伪选择器::before和::after的纯CSS解决方案。一个用于条纹，另一个用作隐藏最后一个字符的掩码：

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/

Answer 2

如何使用CSS transform: skewX(...) + ::after？

<强> HTML：

<h1>Lorem ipsum dolor</h1>

<强> CSS：

h1 {
  font-family: "Avenir", sans-serif;
  text-align: center;
  width: 400px;
}

h1:after {
  background-image: url(http://i63.tinypic.com/29oo77r.png);
  background-size: 10px 100%;
  content: "";
  display: block;
  height: 16px;
  width: 100%;
  transform: skewX(-35deg);
}

LIVE： https://jsfiddle.net/267cp7p3/

这个想法是使用垂直线作为背景，然后将它倾斜。

Answer 3

您可以使用重复的线性渐变：

＆＃13;

body {
  font-family: sans-serif;
}
.title {
  color: #01c0e3;
  display: inline-block;
  padding: 0 0.5em 1em 0;
  margin: 0;
}
.title::after {
  content: '';
  display: block;
  height: .75em;
  background-image: linear-gradient(-75deg, transparent 45%, #01c0e3 45%,
                                            #01c0e3 55%, transparent 55%);
  background-size: .3em;
  background-repeat: round;
}

＆＃13;

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

＆＃13;

Answer 4

您可以使用border-image属性，使用斜杠创建图像，然后将其与border-image一起使用，阅读本文以了解其工作原理

https://css-tricks.com/almanac/properties/b/border-image/

Answer 5

我想我想出来了，但这不是一个有利的解决方案：

http://jsfiddle.net/8suma/1/

for (
  var x = Math.floor(
  $('h4').append("<span>/</span>").width() / $($('h4').children()[0]).width());
  x > 1;
  x-- && $('h4').append("<span>/</span>")
);

它基于这个解决方案：https://stackoverflow.com/a/24143098/4106957

我宁愿没有一个脚本来创建斜杠（如果有很多标题，它可能会减慢网站的速度），但是如果它有效，它会起作用吗？

如果有人有更好的解决方案，请告诉我们！

重复一个角色来创建边框？

5 个答案: