文字/形状内部斜角效果

Question

如何仅使用CSS3创建此效果的任何想法

我似乎无法接近创造这种“内心斜面”效应

Answer 1

方法1

这不会产生斜面3D效果，但 相对简单地设置文本样式，使其看起来从页面中突出，三维：

h1 {
font-size: 60px;
color: rgb(254,127,0);
text-shadow:
1px 1px rgb(204,93,0),
2px 2px rgb(204,93,0),
3px 3px rgb(204,93,0),
4px 4px rgb(204,93,0),
5px 5px rgb(204,93,0),
6px 6px rgb(204,93,0);
}

<h1>Test Text</h1>

=====

方法2

您还可以以更复杂的方式部署CSS text-shadow，以尝试重新创建斜角效果。在这个例子中，x看起来非常好，但没有其他字母比较。

h1 {
font-size: 60px;
font-weight: lighter;
font-stretch: ultra-condensed;
letter-spacing:20px;
color: rgb(255,127,0);
text-shadow:
1px 0px rgb(204,93,0),
-1px 0px rgb(255,186,127),
2px 0px rgb(204,93,0),
-2px 0px rgb(255,186,127),
3px 0px rgb(204,93,0),
-3px 0px rgb(255,186,127),
4px 0px rgb(204,93,0),
-4px 0px rgb(255,186,127),
5px 0px rgb(204,93,0),
-5px 0px rgb(255,186,127);
}

<h1>Test Text</h1>

=====

方法3

更复杂（尽管更具实验性）的方法是使用SVG过滤器 - 现在所有主要的当代浏览器都支持这种过滤器。

下面的示例与您的原始概念看起来并不相似，但SVG过滤器非常通用 - 只要有足够的练习和技巧（并且可以访问相应的@font-face） - 您可以完全复制它。 / p>

N.B。 2015年5月文章中提供了有关SVG过滤器功能的有用介绍：

Dirk Weber的

The Art Of The SVG Filter And Why It Is Awesome

<svg>

<defs>

<style type="text/css">
<![CDATA[
.beveled {
filter: url(#bevel-filter);
font-size: 60px;
font-weight:900;
}
]]>
</style>

<filter id="bevel-filter">

<feGaussianBlur stdDeviation="5" in="SourceAlpha" result="BLUR"/>

<feSpecularLighting surfaceScale="6" specularConstant="1" specularExponent="30" lighting-color="#white" in="BLUR" result="SPECULAR">
<fePointLight x="40" y="-30" z="200" />
</feSpecularLighting>

<feComposite operator="in" in="SPECULAR" in2="SourceAlpha" result="COMPOSITE"/>

<feMerge>
<feMergeNode in="SourceGraphic" />
<feMergeNode in="COMPOSITE"/>
</feMerge>

</filter>

</defs>

<g class="beveled">
<text x="10" y="60" fill="rgb(255,127,0)">Test Text</text>
</g>

</svg>