伪元素文字需要垂直调整，需要什么CSS？

Question

我有一些代码用于渲染从垂直方向到右下角的弯曲边界，如附图所示：

但是正如您所看到的，文本不在正确的位置...当然，它距离 DIV 主要部分的主要垂直右墙 10 像素，但是顶部不是 7px。我已经尝试使用 line-height 渲染 "padding"，但是您在这里看到的是 line-height: 0... 降低它不会让它变得更高...但是增加它, 确实把它推得更远了。

是否可以呈现此代码，使 "ELBOW 1" 出现在距 DIV 顶部 7px 处，但仍将标签中的文本内容保留为数据属性？

JSFiddle: https://jsfiddle.net/eliseo_d/b83d9ytL/3/

代码如下：

HTML:

<div class="elbow-1-botrt-wide0-grey1" data-text="elbow 1"></div>

CSS:

html {
  background-color: rgb(0,0,0);
  font-family: Impact;
}

body {
  margin: 5px;
}

div[class$='-grey1'] {
  background-color: rgb(102,102,102);
}

div[class^='elbow-'] {
  /* default settings */
  color: rgb(0,0,0);
  font-size: 14pt;
  height: 67px;
  margin-bottom: 4px;
  margin-right: 21px;
  text-transform: uppercase;
  width: 104px;
  position: relative;
}

div[class^='elbow-1-'] {
  padding-top: 46px;
}

div[class^='elbow-'][class*='-botrt-'] {
    border-bottom-left-radius: 42px;
}

/* elbow bar */
div[class^='elbow-'][class*='-botrt-']:before {
  content: '';
    height: 30px;
    left: 104px;
    bottom: 0;
    position: absolute;
  margin-right: 4px;
}

div[class^='elbow-'][class*='-wide0-']:before {
    width: 21px;
}
div[class^='elbow-'][class$='-grey1']:before {
  background-color: rgb(102,102,102);
}
/* inside curve */
div[class^='elbow-'][class*='-botrt-']:after {
    height: 21px;
    width: 73px;
    bottom: 30px;
    left: 21px;
    padding-right: 31px;
    position: absolute;
    content: attr(data-text);
    text-indent:-59px;
    color: rgb(0,0,0);
    text-align: right;
}

div[class^='elbow-1-'][class*='-botrt-']:after {
    line-height: 0;
}

div[class^='elbow-'][class*='-botrt-'][class$='-grey1']:after {
    background: radial-gradient(circle at 100% 0%, rgba(102,102,102,0) 21px, rgba(102,102,102,1) 21px);
}

更新：由于某些原因，Impact 字体无法在 Fiddle 中正确呈现...这在我的原始本地代码中不是问题，但上面的填充问题仍然存在。 ..

Answer 1

请尝试此代码示例 sample pen

body {
  background: #000;
}
.elbow {
  background: rgb(102,102,102);
  color: red;
  width: 150px;
  height: 100px;
  padding: 10px 20px;
  border-bottom-left-radius: 50px;
  position: relative;
}
.elbow:before {
  content: '';
  width: 40px;
  height: 75px;
  background: #000;
  position: absolute;
  right: 0;
  top: 0;
  border-bottom-left-radius: 25px;
}

<div class="elbow">
    ELBOW 1
</div>

Answer 2

是的，我们开始了。

html {
  background-color: rgb(0, 0, 0);
  font-family: Impact;
}
body {
  margin: 5px;
}
div[class$='-grey1'] {
  background-color: rgb(102, 102, 102);
}
div[class^='elbow-'] {
  /* default settings */
  color: rgb(0, 0, 0);
  font-size: 14pt;
  height: 67px;
  margin-bottom: 4px;
  margin-right: 21px;
  text-transform: uppercase;
  width: 104px;
  position: relative;
}
div[class^='elbow-1-'] {
  padding-top: 46px;
}
div[class^='elbow-'][class*='-botrt-'] {
  border-bottom-left-radius: 42px;
}
/* elbow bar & inner curve */

div[class^='elbow-'][class*='-botrt-']:before {
  content: '';
  height: 52px;
  width: 21px;
  left: 100%;
  bottom: 0;
  position: absolute;
  /* inside curve */
  background: radial-gradient(circle at top right, transparent, transparent 21px, rgb(102, 102, 102) 21px);
}
/* text content */

div[class^='elbow-'][class*='-botrt-']:after {
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  position: absolute;
  content: attr(data-text);
  color: rgb(0, 0, 0);
}

<div class="elbow-1-botrt-wide0-grey1" data-text="elbow 1"></div>

伪元素文字需要垂直调整，需要什么CSS？

Psuedo-element text requires vertical adjustment, What CSS is required?

html

css

pseudo-element