<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
</head>
<body>
  <section class="component">
    <p>The english quote with english quoation marks.<br><br></p>
<blockquote class="callout quote EN">
   It’s good to meet you, Dr. Banner. Your work on anti-electron collisions is unparalleled. And I’m a huge fan of the way you lose control and turn into an enormous green rage monster.
<cite> - Tony Stark</cite>
  </blockquote>
    <p>Zitat nach deutschen Regeln</p>
 <blockquote class="callout quote DE">
   Es ist schön, Sie kennenzulernen, Dr. Banner. Ihre Arbeit an Anti-Elektronen-Kollisionen ist beispiellos. Und ich bin ein großer Fan davon, wie Sie Ihre Kontrolle verlieren und sich in ein riesiges grünes Wutmonster verwandeln.
<cite> - Tony Stark</cite>
  </blockquote>
    <p><br>2 Line quote</p>
    <blockquote class="zitat1">
     Roads? Where we're going, we don't need... roads.
    <cite>Dr. Emmett Brown</cite>
  </blockquote>
    <p>Sidekick quote german version</p>
   <blockquote class="sidekick">
     The only thing permanent in life is impermanence. <cite> Thor in Endgame</cite>
  </blockquote>
  </section>
  </
.component{
  font-family: "Helvetica Neue","Helvetica",Helvetica,Arial,sans-serif;
  width: 750px;
  margin:0 auto;
  padding: 3rem;
}

.component blockquote.quote {
    position: relative; 
    text-align: center;
    padding: 1rem 1.2rem;
    width: 80%;  /* create space for the quotes */
    color: #484748;
    margin: 1rem auto 2rem;
}
.component blockquote.EN {
    background:
    linear-gradient(to right, #039be5 4px, transparent 4px) 0 100%,
    linear-gradient(to left, #039be5 4px, transparent 4px) 100% 0,
    linear-gradient(to bottom, #039be5 4px, transparent 4px) 100% 0,
    linear-gradient(to top, #039be5 4px, transparent 4px) 0 100%;
    background-repeat: no-repeat;
    background-size: 20px 20px;
}

.component blockquote.DE {
    background:
    linear-gradient(to right, #039be5 4px, transparent 4px) 0% 0%,
    linear-gradient(to bottom, #039be5 4px, transparent 4px) 0% 0%,
    linear-gradient(to left, #039be5 4px, transparent 4px) 100% 100%,
    linear-gradient(to top, #039be5 4px, transparent 4px) 100% 100%;
    background-repeat: no-repeat;
    background-size: 20px 20px;
}
    

/* -- create the quotation marks -- */
.component blockquote.quote:before,
.component blockquote.quote:after{
    font-family: FontAwesome;
    position: absolute;
    color: #039be5;
    font-size: 34px;
}

.component blockquote.EN:before{
    content: "\f10d";
    top: -12px;
    margin-right: -20px;
    right: 100%;
}
.component blockquote.EN:after{
    content: "\f10e";
    margin-left: -20px;
    left: 100%;  
    top: auto;
    bottom: -20px;
}
.component blockquote.DE:before{
    content: "\f10e";
    margin-right: -20px;
    bottom: -20px;
    right: 100%;
}
.component blockquote.DE:after{
    content: "\f10d";
    margin-left: -20px;
    left: 100%;  
    top: -20px;
    bottom: auto;
}

.zitat1 {
  position: relative;
  font-family: 'Verdana', serif;
  font-size: 2.4em;
  line-height: 1.5em;
}
.zitat1 cite {
  font-family: 'Verdana', sans-serif;
  font-size: 0.6em;
  font-weight: 700;
  color: #bdbec0;
  float: right;
}
.zitat1 cite:before {
  content: '\2015'' ';
}
.zitat1:after {
  content: '\201d';
  position: absolute;
  top: 0.28em;
  right: 0px;
  font-size: 6em;
  font-style: italic;
  color: #bdbec0;
  z-index: -1;
}
.sidekick {
  position: relative;
  padding-left: 1em;
  border-left: 0.2em solid #039be5;
  font-family: 'Roboto', serif;
  font-size: 2.4em;
  line-height: 1.5em;
  font-weight: 100;
}
.sidekick:before, .sidekick:after {
  font-family: Calibri;
    color: #039be5;
    font-size: 34px;
}
.sidekick:before {content: '\201e'}
.sidekick:after {content: '\201c';}
.sidekick cite {font-size: 50%; text-align:center; top:50%}
.sidekick cite:before {content: ' \2015 '}

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/css/all.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.