? ????? ??? ?? ??? ???? ??? ?? ?? ?? ?? ??? ?????? ???? ??? ??? ?????. ??? ???? ?? ?? ???? CSS? ???? ????? ???? ?????. ?? ??? ????? ?? ??? ????? CSS? ???? ??? ???? ???? ?? ? ? ????.

??? ?? ??? ???, ?? ????? ? ?? ???? ??? ?? ?? ???? ?? ????? ? ????. ???? ?????.

?? ?

??? ?? ?? ?? ??? ????? (<p> ) ??? ???? ?? ? ?? (Brevity ? Pug ??) :</p> <pre class="brush:php;toolbar:false">&lt;p style=&quot;--slist: #ebac79, #d65b56&quot;&gt; ???? ?? ??? ?? ????.&lt;/p&gt; &lt;p style=&quot;--slist: #90cbb7, #2fb1a9&quot;&gt;??? ?? ?? ?? ?? ???.&lt;/p&gt; &lt;p style=&quot;--slist: #8a7876, #32201c&quot;&gt;??? ?? ??? ?? ?? ?? ???.&lt;/p&gt; &lt;p style=&quot;--slist: #a6c869, #37a65a&quot;&gt;?? ?? ?? ??? ??.&lt;/p&gt;</pre> <p> ? ??? ??? ???? ????? ?? ??? ???? CSS ?? ( <code>--slist )? ?????.

?? ???

?? ?? ???? ??, ?? ? ??-????? ?????.

 $ W : 26EM;
$ H : 5EM;

p {
  ?? : $ W; ?? : $ H;
  Border-Radius : .5*$ h;
  ?? :?;
  ?? : 1.5em/ 1.375 Trebuchet MS, Verdana, Sans-Serif;
}

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

??? ? ??

background-clip ???? ??? ? ??? ????. ??? ??, ?? ?? ? ??? ??? ?? ????? ?? ????? ?????.

 p {
  / * ... ?? ??? ... */
  ????? : Flex;
  ?? ?? : ??;
  ??? ??? : ?? ??;
  ?? ??? : ?? ??;
  ?? : Solid $ B Transparent;
  ?? : $ P;
  ??: 
    Linear-Gradient (#dbdbdb, #fff) ??? ??, 
    ?? ???? (VAR (-List)) ?? ??, 
    ?? ???? (#fff, #dcdcdc) ??? ??;
  ??? ?? : 1em;
}

? ??? ?????? border-radius ? ?? ?? ? ?? ???? ????????.

?? ???

?? ??? :after ???? ?????.

 $ d : $ h -2*$ b;

p {
  / * ... ?? ??? ... */
  ?? : C;

  &:?? {
    ?? ??? : ??;
    ?? : ??;
    ?? : $ D; ?? : $ D;
    ??-???? : 50%;
    Box-Shadow : 
      ?? 0 1px 1px #efefef, 
      inset 0 #{-$ b} rgba ( #000, .1);
    ??: 
      ?? ???? (VAR (-List)) ?? ??, 
      ?? ?? ( #d0d0d0, #e7e7e7) ??? ??;
    ?? : #fff;
    ?? : ??? (C, 10 ??-??);
    ????? : ???;
    ??-?? : ??;
    ?? ??? : -$ P;
    ??? ?? : 0;
  }
}

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

??? pseudo ??

?? ???? :before pseudo element :

 p {
  / * ... ?? ??? ... */
  ?? : ??;

  &:?? {
    ?? : ??;
    ??? : -$ b;
    ?? : $ H;
    ?? : $ H;
    Border-Radius : $ B;
    ?? : ?? (45deg);
    Box-Shadow : 0 0 7px RGBA (#000, .2);
    ?? : ?? ?? (-45deg, ??? ?? (50%- #{. 5*$ h}), ??? 0, ??? ?? (50% #{. 5*$ h}), ?? 0);
    ???: '';
    ?? ?? : ?? (0 ??? $ r);
  }
}

????? clip-path: inset(0 round $r) ???? border-radius ???? ??? ?? ?? ?? ????????. ?????? ?? ??? ??? ?? ? ?? ???? ????? ???? ?????.

? ???? ?? ??? ??? ?? ??? ???? ??? ?? ????? ????? ????? ?? ? ???? ?????. clip-path: inset() ? ????? ?????? ???? ???? ??? ?????.

? ??? (Pseudo) ??? ??? ?? ??? ?????? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!