HTMLとCSSのみを使用して、循環(huán)テキストディスプレイを作成したいですか？ shape-outsideプロパティといくつかの巧妙なCSSテクニックで達成可能です。ただし、このアプローチでは、テキストの長さ、フォントの選択、応答性などの要因を慎重に検討する必要があります。

目的は次のとおりです。柔軟できれいなソリューションを目指して、サークル內(nèi)に引用と著者の帰屬を埋め込みます。この方法は、追加のファイルを回避し、HTMLを簡潔に保ちます。最終結(jié)果はこれに似ているはずです。

（注： shape-outside Microsoft Edgeのインターネットエクスプローラーまたは古いバージョンでサポートされていません。）

HTML構(gòu)造

使用します<div>外側(cè)のラッパーとセマンティックとして<code><blockquote></blockquote>內(nèi)側(cè)の容器として：

<div class="quote-wrapper">
  <blockquote cite="http://www.inspireux.com/category/quotes/jesse-james-garrett/">
    <p class="text">エクスペリエンスデザインとは、媒體から獨立した、またはメディア全體で、明示的な結(jié)果として人間の経験を備えたもの、および明示的な目標としての人間の関與を、あらゆるもののデザインです。</p>
    <footer> - ジェシー?ジェームズ?ギャレット</footer>
  </blockquote>
</div>

引用はaにあります<p>クラスの「テキスト」があり、著者の帰屬は<code><footer></footer>。これらのクラスは、CSSスタイリングのフックを提供します。

初期のCSSスタイリング

ラッパーから始めましょう：

 .quote-wrapper {
  高さ：300px;
  位置：相対;
  幅：300px;
}

これにより、応答性のために最小サイズを設定し、後の調(diào)整のための相対的な位置を確立します。

次に、ラジアル勾配を使用して円形の外観を作成します。

 。文章 {
  背景：放射狀勾配（
    中央の楕円、
    RGBA（0、128、172、1）0％、
    RGBA（0、128、172、1）70％、
    RGBA（0、128、172、0）70.3％
  ）;
  高さ：100％;
  幅：100％;
  色：白;
  位置：相対;
  マージン：0;
}

注：70.3％の値は、単純な70％よりもスムーズなエッジを提供します。

テキストスタイリングと形狀の定義

段落をスタイリングしましょう：

 .text p {
  フォントサイズ：21px;
  フォントスタイル：イタリック;
  高さ：100％;
  ラインハイト：1.25;
  パディング：0;
  テキストアライグ：センター;
  テキストシャドウ：0.5px 0.5px 1px RGBA（0、0、0、0.3）;
}

テキスト領(lǐng)域を形作るために、擬似要素とshape-outsideプロパティ::before使用します。これには、円に近いポリゴンを定義することが含まれます。

 .text :: before {
  コンテンツ： "";
  フロート：左;
  高さ：100％;
  幅：50％;
  シェイプアウトサイド：ポリゴン（
    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％
  ）;
  シェイプマージン：7％;
}

同様の::before<p>円の殘りの半分を作成する要素。</p> <h3 id="フッタースタイリング">フッタースタイリング</h3> <p>著者の帰屬を正しく配置するには、絶対的なポジショニングを使用します。</p> <pre class="brush:php;toolbar:false"> .quote-wrapper blockquoteフッター{ 下：25px; フォントサイズ：17px; フォントスタイル：イタリック; 位置：絶対; テキストアライグ：センター; テキストシャドウ：0.5px 0.5px 1px RGBA（0、0、0、0.3）; 幅：100％; }</pre> <p> <code>font-size 、 shape-margin 、 line-height 、およびその他のプロパティの微調(diào)整が、形狀內(nèi)で最適なテキストフィッティングを?qū)g現(xiàn)するために必要になる場合があります。

引用マークを追加します

.quote-wrapperの擬似要素::beforeを使用して大きな引用マークを追加できます。

 .quote-wrapper :: before {
  コンテンツ： "\ 201c";
  色：#ccc;
  フォントファミリー：sans-serif、serif;
  フォントサイズ：270px;
  高さ：82px;
  Line-Height：1;
  不透明：.9;
  位置：絶対;
  上：-48px;
  左：0;
  z-index：1;
}

レスポンシブデザイン

メディアクエリを使用して、さまざまな畫面サイズのサイズを調(diào)整できます。

 @media（min-width：850px）{
  .quote-wrapper {
    高さ：370px;
    幅：370px;
  }
  / * ...より大きな畫面のその他の調(diào)整... */
}

この包括的なアプローチにより、HTMLとCSSのみを使用して視覚的に魅力的な円形のテキスト表示を作成できます。特定のテキストとデザインの好みに基づいて、微調(diào)整が必??要になる場合があることを忘れないでください。