旋转的阴影文本

Question

我想在这个水平的平面上有文字阴影，而且这些文字浮在表面之上。阴影将成角度以适合​​表面。有什么办法吗？我只使用css和html。

.b {
  float:left;
  text-decoration:none;
  position:absolute;
  margin-left:20%;
  margin-top:10%;
  padding: 50px 100px;
  background:#DF0000;
  box-shadow: inset 20px 0 50px 0 #900000, inset -20px 0 50px 0 #900000, 0 10px 20px #000000;
  border-bottom-left-radius: 50%;
  border-bottom-right-radius: 50%;
  border-top-left-radius: 20%;
  border-top-right-radius: 20%;
}
.b2 {
  float:left;
  text-decoration:none;
  position:absolute;
  margin-left:20%;
  margin-top:112px;
  padding: 30px 100px;
  background:#760000;
  box-shadow: inset 0 0 10px 0 #000000;
  border-radius: 50%;
  transition: all ease-in-out 200ms;
}
.b2:hover {
  float:left;
  text-decoration:none;
  position:absolute;
  margin-left:20%;
  margin-top:120px;
  padding: 30px 100px;
  background:#760000;
  box-shadow: inset 0 0 10px 0 #000000;
  border-radius: 50%;
}

<div class="b"></div>
<div class="b2">
  <p></p>
</div>

抱歉，该代码段会更改代码。看看图片。我希望按钮顶部有文字。文字阴影将躺在按钮表面上。

Answer 1

您需要两份文本副本。一个是文本本身，没有阴影。另一个将是影子施法者。

您可以将文字color: transparent仅显示其阴影。

＆＃13;

＆＃13;

#shadow {
  font-size: 24pt;
  margin: 20px;
  color: transparent;
  text-shadow: 0 0 6px 1px black;
}

＆＃13;

<div id="shadow">SHADOWS</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

这是我的尝试，使用伪元素创建阴影，并使用偏斜来创建角度透视。

.base { 
    width: 500px;
    height: 200px;
    background: red;
    border-radius: 50%;
    position: absolute;
    top: 80px;
    left: 40px;
    box-shadow: inset 0px 0px 6px 6px gray;
}

#text {
   color: wheat;
   font-size: 90px;
   position: absolute;
   left: 162px;
   top: 118px;
   z-index: 10;
}

#text:after {
    content: attr(data-text);
    color: black;
    position: absolute;
    left: 23px;
    top: 10px;
    transform: skewX(-40deg);
    text-shadow: 0px 0px 5px black, 0px 0px 15px black;
    z-index: -1;
}

<div class="base"></div>
<div id="text" data-text="TEXT">TEXT</div>