javascript - 文本/形状内斜 Angular 效果

Question

关于如何单独使用 CSS3 创建此效果的任何想法

我似乎无法接近创建这种“内部斜 Angular ”效果

Answer 1

方法一

这不会产生倾斜的 3D 效果，但可以相对简单地设置文本样式，使其在 3 维空间中从页面中脱颖而出:

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>

=====

方法二

您还可以以更复杂的方式部署 CSS text-shadow，以尝试重新创建斜 Angular 效果。在此示例中，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)，您可以完全复制它。

注意 2015 年 5 月的这篇文章中提供了有关 SVG 过滤器功能的有用介绍:

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>