Psuedo-Element Text erfordert vertikale Anpassung, welche CSS ist erforderlich?

Question

Ich habe einige Code, der eine gekrümmte Grenze von einer vertikalen nach unten rechts zu machen ist gemeint, wie in der beigefügten Abbildung dargestellt:

Aber wie Sie sehen können, ist der Text nicht in der richtigen Spot ... gewährt, es ist 10 Pixel von der rechten Hauptwand des Hauptteils des DIV, aber die Polsterung von oben ist nicht 7px. Ich habe versucht, das "Padding" mit line-height Rendering, aber was Sie hier sehen, ist um line-height: 0 ... geht etwas niedriger nicht macht es nicht höher gehen ... Erhöhung jedoch, tut es weiter nach unten.

Gibt es irgendwelche kann ich diesen Code so rendern, dass "ELBOW 1" 7px von der Spitze des DIV erscheint, und dennoch den Textinhalt innerhalb des Tags als Datenattribut beibehalten?

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

-Code unten:

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

Update: Aus irgendeinem Grund die Auswirkungen Schriftart nicht rendert richtig in der Geige ... Thi s wird kein Problem in meinem ursprünglichen lokalen Code, aber die Polsterung Ausgabe von oben noch steht ...

Answer 1

Yep, hier wir gehen.

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

Bitte versuchen Sie dieses Codebeispiel 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>