About Positioning The Speech Bubble Created By Css
I am creating a webpage to show some Q&A for my students. I search online and find the following CSS may work to create a speech bubble with arrow on the left or on the right.
Solution 1:
You can use this code
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>index</title>
<style type="text/css">
body {
margin: 0;
}
.speech {
background: #efefef;
-webkit-border-radius: 4px;
border-radius: 4px;
font-size: 1.2rem;
line-height: 1.3;
margin: 0px 30px 40px 190px;
max-width: 80%;
padding: 15px;
position: relative;
filter: drop-shadow(6px 4px 0px rgba(0, 0, 0, 0.2));
border: 1px solid black;
}
.onLeft::after {
border-left: 11px solid transparent;
border-right: 11px solid #efefef;
border-top: 11px solid #efefef;
border-bottom: 11px solid transparent;
content: "";
position: absolute;
left: -20px;
top: 8px;
filter: drop-shadow(-2px -1px 0px black);
}
.onRight:after {
content: "";
position: absolute;
border-left: 11px solid #efefef;
border-right: 11px solid transparent;
border-top: 11px solid #efefef;
border-bottom: 11px solid transparent;
right: -20px;
top: 8px;
filter: drop-shadow(2px -1px 0px black);
}
@media only screen and (max-width: 1366px) {
.speech {
margin: 0px 30px 40px 190px;
max-width: 72%;
}
}
@media only screen and (max-width: 1024px) {
.speech {
margin: 0px 30px 40px 190px;
max-width: 64%;
}
}
@media only screen and (max-width: 768px) {
.speech {
margin: 0px 30px 40px 190px;
max-width: 51%;
}
}
@media only screen and (max-width: 767px) {
.speech {
margin: 0px 30px 40px 190px;
max-width: 45%;
}
}
@media only screen and (max-width: 575px) {
.speech {
margin: 0px 30px 40px 190px;
max-width: 30%;
}
}
</style>
</head>
<body>
<div style="font-size: 12pt; margin-bottom: 20px; clear: both;">
<img style="float: left; margin: 15px;" src="https://www.w3schools.com/images/picture.jpg" width="120 " />
<div class="speech onLeft ">Here is my example of a speech bubble created in CSS and HTML.</div>
</div>
<div style="font-size: 12pt; margin-bottom: 20px; clear: both; ">
<img style="float: right; margin: 15px;" src="https://www.w3schools.com/images/picture.jpg" width="120" />
<div class="speech onRight">Here is my example of a speech bubble created in CSS and HTML. The arrow is on the right and the image is floating to the right.</div>
</div>
</body>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>Solution 2:
I would forget about float here. If you turn the container into a Flexbox container, everything will be extremely easy. You won't have to use that 160px left margin.
In the second case, if you can't change the order, you'll be able to do it as well with Flexbox (using order). If you need the exact code to solve this, let me know, although I think you can manage to solve it.
See some tricks here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Post a Comment for "About Positioning The Speech Bubble Created By Css"