擬似要素のテキストには縦方向の調整が必要です。どのCSSが必要ですか？

Question

私は、添付の写真のように右下に垂直から曲がった境界線を描画することを意図しているいくつかのコードがあります。

をしかし、あなたが見ることができるように、テキストは右ではありませんspot ...は、DIVの主要部分のメイン垂直右壁から10ピクセルですが、上からのパディングは7ピクセルではありません。私は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); 
} 

更新：何らかの理由でインパクトフォントがレンダリングされていません正しくフィドルで...ティsが私の元のローカルコードでは問題になりませんが、上からのパディングの問題はまだ立って...

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

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>