SOURCE

console 命令行工具 X clear

                    
>
console
<!-- inspired by https://adobe.ly/39tvYSM -->
<h1>Quote Cards</h1>
<div class="test">
<blockquote class="q-card q-card-color-1">
  <div class="content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh eusismod tincidunt.</div>
  <div class='author'>John Doe</div>
</blockquote>
</div>
<div class="test">
<blockquote class="q-card q-card-color-2">
  <div class="content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh eusismod tincidunt.</div>
  <div class='author'>John Doe</div>
</blockquote>
</div>
<div class="test">
<blockquote class="q-card q-card-color-3">
  <div class="content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh eusismod tincidunt.</div>
  <div class='author'>John Doe</div>
</blockquote>
</div>
/* demo setup */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box }
body { min-height: 100vh; padding: 2rem; background-color: #EBEBEB; font-family: 'Open Sans', sans-serif; }
body > * + *  { margin-top: 1.5em }
h1{ text-align: center; font-weight: 800; color: rgb(6 6 6); text-transform: uppercase }
blockquote { max-width: 25rem; margin-inline: auto }

/* blockquote card colors */
blockquote.q-card-color-1{
  --accent-color: rgb(32 32 54);
  --bg-color: rgb(30 145 254);
  --dot-color: rgb(255 255 255 / .35);
  --text-color: rgb(243 243 243);
  --text-color-author: rgb(243 243 243);
  
}
.test{
    display: flex;
    justify-content: center;
}

blockquote.q-card-color-2{
  --accent-color: rgb(243 243 243);
  --bg-color: rgb(33 29 30);
  --dot-color: rgb(255 255 255 / .125);
  --text-color: rgb(243 243 243);
  --text-color-author: rgb(33 29 30);
}

blockquote.q-card-color-3{
  --accent-color: rgb(30 145 254);
  --bg-color: rgb(32 32 54);
  --dot-color: rgb(255 255 255 / .125);
  --text-color: rgb(243 243 243);
  --text-color-author: rgb(243 243 243);
}

/* blockquote card setup*/
blockquote.q-card{
  --padding: 1rem;
  padding: var(--padding);
  color: var(--text-color, black);
  font-weight: 600;
  background-color: var(--bg-color, white);
  display: grid;
  gap: 1rem;
  background-image: radial-gradient( circle, var(--dot-color, rgb(0 0 0 / .125)) calc(25% - 1px), transparent 25% );
  background-size: 0.5rem 0.5rem;
  border-radius: 0.25rem;
  box-shadow: 0.5rem 0.5rem 2rem rgb(0 0 0 / .5)
  
}
blockquote.q-card::before{
  --qHeight: 4rem;
  content: "";
  margin-left: calc(var(--padding) * -1);
  margin-top: calc(var(--padding) * -1);
  height: var(--qHeight);
  width: calc(var(--qHeight) * 1.1);
  background-image:
    radial-gradient(
      circle at bottom right,
      transparent calc(var(--qHeight) / 4 - 1px),
      var(--accent-color, black) calc(var(--qHeight) / 4) calc(var(--qHeight) / 2), 
      transparent calc(var(--qHeight) / 2 + 1px)
    ),
    linear-gradient(var(--accent-color, black), var(--accent-color, black));
  background-size: calc(var(--qHeight) / 2) calc(var(--qHeight) / 2);
  background-position: top left, bottom left;
  background-repeat: space no-repeat
}

blockquote.q-card > .author{
  color: var(--text-color-author, white);
  background-color: var(--accent-color, black);
  justify-self: end;
  font-size: 0.75em;  
  padding: 0.5em 1em;
  border-radius: 0.25rem;
}
blockquote.q-card > .author::before{
  content: "- "
}