HTML ? CSS ? ???? ?? ??? ?????? ??? ?????? shape-outside ??? ?? ??? CSS ??? ?? ? ? ????. ???? ???? ??? ??, ?? ?? ? ?? ?? ?? ??? ???? ???????.

??? ??? ????. ??? ???? ??? ???? ??? ?? ?? ???? ?? ??? ???? ????. ? ??? ?? ??? ??? HTML? ???? ?????. ?? ??? ??? ???????.

(?? : shape-outside Internet Explorer ?? ??? ??? Microsoft Edge?? ???? ????.)

HTML ??

??? ??? ????<div> ?? ??? ?? ??<code><blockquote></blockquote> ?? ????? :

<div class="quote-wrapper">
  <blockquote cite="http://www.inspireux.com/category/quotes/jesse-james-garrett/">
    <p class="text">Experience Design? ??? ??? ??? ??? ??? ??? ??? ??? ?? ?? ?? ??? ??? ?? ???? ??????.</p>
    <footer>- ?? ??? ??</footer>
  </blockquote>
</div>

???? a? ????<p> ??? "???"? ?? ?? ???<code><footer></footer> . ? ???? CSS ?????? ??? ?????.

?? CSS ???

???? ???????.

 .Quote-Wrapper {
  ?? : 300px;
  ?? : ??;
  ?? : 300px;
}

?? ?? ?? ?? ?? ??? ???? ??? ????? ?? ??? ?????.

???? ??? ??? ???? ?? ??? ????.

 .??? {
  ?? : ??? ???? (
    ??? ??,
    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;
  ??? ?? : ??;
  Text-Shadow : 0.5px 0.5px 1px rgba (0, 0, 0, 0.3);
}

??? ??? ???? ?? Pseudo Element? shape-outside ?? ::before ? ?????. ???? ?? ?? ???? ???? ?? ?????.

 .text :: ?? {
  ???: "";
  ??? : ??;
  ?? : 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 pseudo element? ??? ? ????<p> ?? ??? ??? ???? ??.</p> <h3 id="??-?-???"> ?? ? ???</h3> <p> ?? ??? ???? ????? ?? ????? ??? ????.</p> <pre class="brush:php;toolbar:false"> .Quote-Wrapper Blockquote ?? ? { ?? : 25px; ?? ?? : 17px; ?? ??? : ????; ?? : ??; ??? ?? : ??; Text-Shadow : 0.5px 0.5px 1px rgba (0, 0, 0, 0.3); ?? : 100%; }</pre> <p> <code>font-size , shape-margin , line-height ? ?? ??? ?? ??? ?? ??? ??? ??? ??? ???? ?? ??? ? ????.

?? ?? ??

.quote-wrapper ?? pseudo element : the ::before ? ???? ?? ? ? ????.

 .quote-wrapper :: ?? {
  ?? : "\ 201c";
  ?? : #CCC;
  Font-Family : Sans-Serif, Serif;
  ?? ?? : 270px;
  ?? : 82px;
  ?-?? : 1;
  ???? : .9;
  ?? : ??;
  ?? : -48px;
  ?? : 0;
  z- ??? : 1;
}

?? ? ???

??? ??? ??? ?? ??? ??? ???? ? ??? ? ????.

 @Media (min-width : 850px) {
  .Quote-Wrapper {
    ?? : 370px;
    ?? : 370px;
  }
  / * ... ? ? ??? ?? ?? ?? ... */
}

? ??? ? ?? ??? ???? HTML ? CSS ? ???? ????? ???? ?? ??? ?????? ?? ? ? ????. ?? ??? ? ??? ?? ??? ?? ?? ??? ??? ? ????.