SO #77360145

https://stackoverflow.com/questions/77360145/coding-a-blockquote-with-icon-and-responsive-border-wrap-with-html-css

by moob

HTML

<!--
Give the blockquote a rounded border.
Make the CSV a data-url and remove the white background.
Put it in a pseudo-element in the blockquote.
Give the pseuo-element a background so the blockquote's border does not show through.
Set the background colour as a css variable so we only have to change it in one place.
Wrap the blockquote in a container that we can position and style. This is where the --bg variable is defined.
-->


<div class="blockquote-container">
<blockquote>
Quality performance success frequently results in higher distribution of shared savings and incentive payments.
</blockquote>
</div>

<div class="blockquote-container bg2">
<blockquote>
Have a different background colour if you like. The background colour is a css variable so you can add a custom class in your stylesheet or set the `--bg` in your inline style.
</blockquote>
</div>

<div class="blockquote-container" style="--bg:#fff9c0">
<blockquote>
Resize your browser to see how these flow.
</blockquote>
</div>

<blockquote>
You don't have to have the container but it will fallback to whatever your --bg is set to else white.
</blockquote>

CSS

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100&family=Poppins&display=swap');
:root {
  --bg: #eee;
}
html, body {margin:0;}
body {
  display: grid;
  gap:20px;
  height: 100vh; 
  place-items: center;
  background: var(--bg, #eee);
  font-family: 'Poppins', sans-serif;
  padding:20px;
}
/* The above is just for demo. */
.blockquote-container {
  --bg: white;
  background:var(--bg);
  max-width:min(100%,560px);
  padding:30px;
  border-radius:20px;  
  box-sizing:border-box;
}
.blockquote-container.bg2 {
  --bg: #e7e4f0;
}
.blockquote-container.bg2:hover {
  --bg: #adb;
}
blockquote {
  display:flex;
  box-sizing:border-box;
  align-items: center;
  box-sizing:border-box;
  position:relative;
  border:2px solid #68519f;
  border-radius:8px;
  padding:0.5em 1em;
  background:var(--bg, white);
  font-size:0.8rem;
  margin:0 0 0 30px;
  min-height:4em;
}
blockquote:before {
  content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:serif='http://www.serif.com/' width='100%25' height='100%25' viewBox='0 0 47 44' version='1.1' xml:space='preserve' style='display:none; fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;'%3E%3Cg id='quote'%3E%3Ccircle class='c' cx='21.035' cy='20.84' r='20.775' style='fill:none;'%3E%3C/circle%3E%3Cpath class='c' d='M30.538,34.093l3.75,0.247l6,4.92l0.247,-5.002l3.083,-0.833l1.747,-2.167l0,-14.333l-1.665,-1.417l-2.415,-0.668l-18.832,0.668l0.915,15.165l0.915,2.25l3.502,1.417l2.753,-0.247Z' style='fill:none;fill-rule:nonzero;'%3E%3C/path%3E%3Cpath d='M21.59,43.153c-4.47,-0 -8.925,-1.38 -12.682,-4.103c-9.638,-6.982 -11.79,-20.505 -4.808,-30.142c6.99,-9.638 20.513,-11.79 30.143,-4.808l-0.878,1.215c-8.962,-6.502 -21.547,-4.492 -28.05,4.47c-6.502,8.963 -4.492,21.548 4.47,28.05c6.36,4.605 14.88,5.085 21.713,1.208l0.742,1.305c-3.307,1.875 -6.982,2.805 -10.65,2.805Z' style='fill:%2379cbc5;fill-rule:nonzero;'%3E%3C/path%3E%3Cpath...