Nur durch CSS Umsetzbar?

[MrMurphy1]

Hallo,

du brauchst nur aus meinem Quelltext die CSS-Anweisungen mit ".bubble" übernehmen

.bubble {
   background: #fff101;
   /*Von den beiden display-Eigenschaften die gewünschte als letzte schreiben*/
   /*Aktuell ist inline-block aktiv*/
   display: block;
   display: inline-block;
   position: relative;
   padding: 10px;
   border: 4px solid #F200FF;
   border-radius: 5px;
}
.bubble::after,
.bubble::before {
   top: 100%;
   left: 50%;
   content: " ";
   height: 0;
   width: 0;
   position: absolute;
   pointer-events: none;
   border: solid transparent;
}
.bubble::after {
   border-top-color: #fff101;
   border-width: 30px;
   margin-left: -30px;
}
.bubble::before {
   border-top-color: #F200FF;
   border-width: 36px;
   margin-left: -36px;
}

und folgenden HTML-Quelltext:

<div class="bubble">
   <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr</p>
   <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr</p>
   <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr</p>
</div>

An deinem bisherigen Lösungsansatz ist nicht schön, dass zusätzliche Elemente nur für das CSS benötigt werden. Das sollte so weit wie möglich vermieden werden.

Gruss

MrMurphy