Question

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

但正如你所看到的那样，文字不在正确的位置...被授予，它距离DIV主要部分的主垂直右墙10像素，但顶部的填充不是7px。我已尝试使用line-height渲染“填充”，但您在此处看到的是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);
}

更新：出于某种原因，影片字体在小提琴中无法正确呈现...这在我原来的本地代码中不会出现问题，但上面的填充问题仍然存在......

Answer 1

是的，我们走了。

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>

Answer 2

请尝试使用此代码示例sample pen

＆＃13;

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;
}

＆＃13;

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

＆＃13;

Psuedo-element文本需要垂直调整，需要什么CSS？

2 个答案: