CSS to achieve chat bubble effect
|
1. Rendering JD Effect
Simulation Effect
2. Principle Prepare a box with height and width of 0 Set a border around this box Replace the unnecessary borders with If you need to change its size, just set the border width Set the Finally, use positioning to set it to the desired position 3. Code HTML Structure
<div class="square">
<p class="triangle"></p>
</div>CSS Styles
.square {
position: relative;
width: 400px;
height: 200px;
background: green;
margin: 150px auto;
}
.triangle {
position: absolute;
top: -40px;
left: 50%;
margin-left: -20px;
width: 0;
height: 0;
border-style: solid;
border-width: 20px;
border-color: transparent transparent red transparent;
font-size: 0;
line-height: 0;
}This is the end of this article about CSS chat bubbles. For more relevant CSS chat bubbles content, please search 123WORDPRESS.COM’s previous articles or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future! |
<<: MySQL 5.7 Common Data Types
>>: Linux checkup, understand your Linux status (network IO, disk, CPU, memory)
Recommend
Solution to the ineffectiveness of flex layout width in css3
Two-column layout is often used in projects. Ther...
Basic operations of mysql learning notes table
Create Table create table table name create table...
CSS3 uses scale() and rotate() to achieve zooming and rotation
1. scale() method Zoom refers to "reducing&q...
Summary of MySQL 8.0 Online DDL Quick Column Addition
Table of contents Problem Description Historical ...
The difference between name and value in input tag
type is the control used for input and output in t...
A brief discussion on the design of Tomcat multi-layer container
Table of contents Container Hierarchy The process...
Detailed explanation of JS ES6 coding standards
Table of contents 1. Block scope 1.1. let replace...
IIS and APACHE implement HTTP redirection to HTTPS
IIS7 Download the HTTP Rewrite module from Micros...
The handler PageHandlerFactory-Integrated has a bad module ManagedPipelineHandler in its module list
When developing a web project, you need to instal...
Example of implementing hollow triangle arrow and X icon with after pseudo element
In the front-end design draft, you can often see ...
Tutorial on installing MySQL 5.6 using RPM in CentOS
All previous projects were deployed in the Window...
Differentiate between null value and empty character ('') in MySQL
In daily development, database addition, deletion...
Three ways to refresh iframe
Copy code The code is as follows: <iframe src=...
Which is faster among MySQL full-text index, joint index, like query, and json query?
Table of contents Query Background 1. Like query ...