CSS3全宽梯形/多边形文字？

我正尝试重做一个客户端网站，该网站目前没有响应，并且在整个网站中，她的图像长度都是带有文本的梯形。当然，在设备上，你几乎无法读取它。CSS3全宽梯形/多边形文字？

所以我试图把它变成使用CSS的形状。尝试了一堆例子，但目前没有任何工作。我认为不同之处在于，示例似乎使用硬宽度数字而不是100％来计算流体宽度。我有笔在这里：https://codepen.io/anon/pen/KmgoqE，这里是我与我张贴此（还在玩，当然）打码：

h2.test-text { 
    background: #000; 
    color: #FFF; 
    padding: 5px; 
    font-size: 30px; 
    line-height: 1; 
    width: 100%; 
    text-align: center; 
    position: relative; 
} 

h2.test-text:before { 
    content: ""; 
    position: absolute; 
    border: none; 
    top: -4%; 
    bottom: -11%; 
    left: -3%; 
    right: -3%; 
    z-index: -1; 
    -webkit-transform: perspective(50em) rotateX(-30deg); 
    transform: perspective(50em) rotateX(-30deg) 
}

来源

2017-04-24 Adam Bell

你已经很好的答案

再举一个尝试。我选择了解当前的尝试。

基本问题是，背景应该是假，而不是基地

h2.test-text { 
 
    color: #FFF; 
 
    padding: 5px; 
 
    font-size: 30px; 
 
    line-height: 1; 
 
    width: 100%; 
 
    text-align: center; 
 
    position: relative; 
 
} 
 

 
h2.test-text:before { 
 
    content: ""; 
 
    position: absolute; 
 
    border: none; 
 
    top: -0px; 
 
    bottom: -50%; 
 
    left: 0px; 
 
    right: 0px; 
 
    z-index: -1; 
 
    background: #000; 
 
    transform: perspective(20em) rotateX(-45deg); 
 
    transform-origin: top; 
 
}

<h2 class="test-text">Check out what our Clients are Saying</h2>

现在在看中效应

h2.test-text { 
 
    color: #FFF; 
 
    padding: 5px; 
 
    font-size: 30px; 
 
    line-height: 1; 
 
    width: 100%; 
 
    text-align: center; 
 
    position: relative; 
 
    perspective: 20em; 
 
    animation: tilt 2s infinite alternate linear; 
 
} 
 

 
h2.test-text:before { 
 
    content: ""; 
 
    position: absolute; 
 
    border: none; 
 
    top: -0px; 
 
    bottom: -50%; 
 
    left: 0px; 
 
    right: 0px; 
 
    z-index: -1; 
 
    background: #000; 
 
    transform: rotateX(-45deg); 
 
    transform-origin: top; 
 
} 
 

 
@keyframes tilt { 
 
    from {perspective-origin: left} 
 
    to {perspective-origin: right} 
 
}

<h2 class="test-text">Check out what our Clients are Saying</h2>

来源

2017-04-24 20:55:23 vals

谢谢！这工作。如果我只想做一面而不是左面和右面呢？ –

@AdamBell使用我的解决方案，只需删除伪，或....像这样做_vals_ https://jsfiddle.net/psqf9m3k/1/ – LGSon

..和加1 :) – LGSon

您可以通过使用普通透明边框伎俩，以实现达到这种效果css三角形。而不是甚至是边界，只有一个设置为不透明，您可以使用不同的边框尺寸和两种颜色。我用不同的颜色标记右侧边缘，以便更容易地看到发生了什么。

h2.test-text { 
 
    background: #bada55; 
 
    color: #FFF; 
 
    font-size: 30px; 
 
    padding: 5px; 
 
    line-height: 1; 
 
    width: 80%; 
 
    text-align: center; 
 
    position: relative; 
 
    margin:40px; 
 
} 
 
h2.test-text:before, h2.test-text:after { 
 
    content:"";position:absolute;top:0;width:0;height:0; 
 
    border-style:solid; 
 
    border-width:20px 15px; 
 
} 
 
h2.test-text:before{ 
 
    left: -30px; 
 
    border-color: #bada55 #bada55 transparent transparent; 
 
} 
 
h2.test-text:after { 
 
    right: -30px; 
 
    border-color:blue transparent transparent red; 
 
}

<h2 class="test-text">Whatever somebody says&hellip;</h2>

来源

2017-04-24 18:50:35 Christoph

通过使用伪元素，歪斜他们，你能做到这一点。

这一个如果行分解为3行，如果你需要更多，媒体查询将解决这个问题。

h2.test-text { 
 
    background: #000; 
 
    color: #FFF; 
 
    padding: 5px; 
 
    font-size: 30px; 
 
    width: calc(100% - 120px); 
 
    margin: 0 auto; 
 
    text-align: center; 
 
    position: relative; 
 
} 
 

 
h2.test-text:before, 
 
h2.test-text:after { 
 
    content: ""; 
 
    position: absolute; 
 
    top: 0; 
 
    height: 100%; 
 
    width: 70px; 
 
    background: inherit; 
 
    z-index: -1; 
 
} 
 

 
h2.test-text:before { 
 
    left: -35px; 
 
    transform: skewX(30deg) 
 
} 
 

 
h2.test-text:after { 
 
    right: -35px; 
 
    transform: skewX(-30deg) 
 
} 
 

 
h2.test-text.nr2 { 
 
    margin-top: 20px; 
 
    width: calc(60% - 100px); 
 
}

<h2 class="test-text">Check out what our Clients are Saying</h2> 
 

 
<h2 class="test-text nr2">Check out what our Clients are Saying</h2>

来源

2017-04-24 18:58:39 LGSon

CSS3全宽梯形/多边形文字？

回答

相关问题