2020年04月16日(木)

円状の要素の中にテキストを収める

• 0
• 1
• 1
• 5

Result

See the Pen HTML text inside a circle shape by kachibito
(@kachibito) on CodePen.

円の中にテキストが自動で収まるようになっています

円はradial-gradientを、回り込みはshape-outsideを用いますので、まだ実用向けとは言えません

css

.quote-wrapper {/*親*/ width: 300px; height: 300px; position: relative; margin: 10vh auto 0; } .text { width: 100%; height: 100%; /*円形グラデーション*/ background: radial-gradient( ellipse at center, rgba(0, 128, 172, 1) 0%, rgba(0, 128, 172, 1) 70%, rgba(0, 128, 172, 0) 70.3% ); position: relative; margin: 0;...