nicht angemeldet
Hallo
kann ich diese Grafik nur durch CSS nachbilden?
Ja. Aber deine Angaben sind leider etwas mager.
Ich habe mal ein flexibles Beispiel erstellt, das problemlos angepasst werden kann.
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Sprechblase 01</title>
<meta name="description" content="HTML5, CSS3">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
@media all {
/* Neue HTML5-Elemente für ältere Browser als Block-Elemente übergeben */
header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
display: block;
}
* {
box-sizing: border-box;
}
html {
font-size: 120%;
}
body {
padding: 0;
}
.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;
}
}
</style>
</head>
<body>
<h3 class="bubble">Sprechblase mit etwas Text</h3>
</body>
</html>
Gruss
MrMurphy
Gunnar Bittersmann
Der Martin