Result
円の中にテキストが自動で収まるようになっています
円は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; color: white;}.text p {/*中のテキスト*/ height: 100%; line-height: 1.25; padding: 0; text-align: center; font-style: italic; text-shadow: 0.5px 0.5px 1px rgba(0, 0, 0, 0.3);}/*疑似要素で回り込み指定*/.text::before { content: ""; width: 50%; height: 100%; float: left; shape-outside: polygon( 0 0, 98% 0, 50% 6%, 23.4% 17.3%, 6% 32.6%, 0 50%, 6% 65.6%, 23.4% 82.7%, 50% 94%, 98% 100%, 0 100% ); shape-margin: 7%;}.text p::before { content: ""; width: 50%; height: 100%; float: right; shape-outside: polygon( 2% 0%, 100% 0%, 100% 100%, 2% 100%, 50% 94%, 76.6% 82.7%, 94% 65.6%, 100% 50%, 94% 32.6%, 76.6% 17.3%, 50% 6% ); shape-margin: 7%;}.quote-wrapper blockquote footer { width: 100%; position: absolute; bottom: 25px; font-size: 13px; text-align: center; font-style: italic; text-shadow: 0.5px 0.5px 1px rgba(0, 0, 0, 0.3);}.quote-wrapper::before {/*引用符*/ content: "\201C"; font-size: 270px; height: 82px; line-height: 0.78; line-height: 1; position: absolute; top: -48px; left: 0; z-index: 1; font-family: sans-serif, serif; color: #ccc; opacity: 0.9;} |
html
<div class="quote-wrapper"> <blockquote class="text" cite=""> <p>本文</p> <footer>– 引用元とか</footer> </blockquote></div> |
can i use
現段階でのブラウザ対応状況です。今後の動きにご注意ください
