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><htmllang="en"><head><metacharset="utf-8"><metaname="viewport"content="width=device-width, initial-scale=1, shrink-to-fit=no"><linkrel="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><styletype="text/css">body {
margin: 0;
}
.speech {
background: #efefef;
-webkit-border-radius: 4px;
border-radius: 4px;
font-size: 1.2rem;
line-height: 1.3;
margin: 0px30px40px190px;
max-width: 80%;
padding: 15px;
position: relative;
filter: drop-shadow(6px4px0pxrgba(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 -1px0px 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 -1px0px black);
}
@mediaonly screen and (max-width: 1366px) {
.speech {
margin: 0px30px40px190px;
max-width: 72%;
}
}
@mediaonly screen and (max-width: 1024px) {
.speech {
margin: 0px30px40px190px;
max-width: 64%;
}
}
@mediaonly screen and (max-width: 768px) {
.speech {
margin: 0px30px40px190px;
max-width: 51%;
}
}
@mediaonly screen and (max-width: 767px) {
.speech {
margin: 0px30px40px190px;
max-width: 45%;
}
}
@mediaonly screen and (max-width: 575px) {
.speech {
margin: 0px30px40px190px;
max-width: 30%;
}
}
</style></head><body><divstyle="font-size: 12pt; margin-bottom: 20px; clear: both;"><imgstyle="float: left; margin: 15px;"src="https://www.w3schools.com/images/picture.jpg"width="120 " /><divclass="speech onLeft ">Here is my example of a speech bubble created in CSS and HTML.</div></div><divstyle="font-size: 12pt; margin-bottom: 20px; clear: both; "><imgstyle="float: right; margin: 15px;"src="https://www.w3schools.com/images/picture.jpg"width="120" /><divclass="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><scriptsrc="https://code.jquery.com/jquery-3.3.1.slim.min.js"integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"crossorigin="anonymous"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"crossorigin="anonymous"></script><scriptsrc="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"