


Use CSS to create small sharp corners and bubble effects in the chat box
I often see such sharp corners. I didn’t understand them before and thought they were all made with pictures. Later I was surprised to find that many of them were made with CSS. They are both beautiful and resource-saving. It’s really the best of both worlds!
So, how to achieve this effect using CSS? First, let’s write a simple code:
The code is as follows:
<p class="arrow"></p> <style type="text/css"> .arrow { width:0; height:0; font-size:0; border:solid 10px #000; }</style>
Here, we can get a black square, which is actually composed of a border, because the width and height of p are 0,. So, let’s take a closer look at what the top, bottom, left, and right borders of p look like when its width and height are both 0. Next, we set the colors of each side of the border to different colors:
The code is as follows :
<p class="arrow"></p> <style type="text/css"> .arrow { width:0; height:0; font-size:0; border:solid 10px; border-color :#f00 #0f0 #00f #000; } </style>
We found that when the width and height of p are both 0, its entire border is composed of four triangles, with each side being a triangle. Then we can take advantage of this feature, Let’s make cute little sharp corners. We only need to set the color of the unnecessary three-sided border (triangle) to be the same as the background, so that you can only see the triangle you want, and then use positioning to adjust the position. The specific code is as follows:
The code is as follows:
<p class="s end "> <p class="arrow"></p> </p> <style type="text/css"> body { background :#4D4948; } .send { position:relative; width:150px; height:35px; background:#F8C301; border-radius:5px; /* 圆角 */ margin:30px auto 0; } .send .arrow { position:absolute; top:5px; right:-16px; /* 圆角的位置需要细心 调试 哦 */ width:0; height:0; font-size:0; border:solid 8px; border-color:#4D4948 #4D4948 #4D4948 #F8C301; } </style>
You are done, the effect is as shown below:
[Related recommendations]
2. Browser implements high-performance css3 animation on mobile terminal
3. h5 +Css3 code example to achieve image fly-in and fade-out effects
4. Teach you how to use CSS3 to create 8 kinds of Loading animation
5. Teach you how to draw a standard circular pattern using CSS
The above is the detailed content of Use CSS to create small sharp corners and bubble effects in the chat box. For more information, please follow other related articles on the PHP Chinese website!

In this post, Blackle Mori shows you a few of the hacks found while trying to push the limits of Cohost’s HTML support. Use these if you dare, lest you too get labelled a CSS criminal.

Custom cursors with CSS are great, but we can take things to the next level with JavaScript. Using JavaScript, we can transition between cursor states, place dynamic text within the cursor, apply complex animations, and apply filters.

Interactive CSS animations with elements ricocheting off each other seem more plausible in 2025. While it’s unnecessary to implement Pong in CSS, the increasing flexibility and power of CSS reinforce Lee's suspicion that one day it will be a

Tips and tricks on utilizing the CSS backdrop-filter property to style user interfaces. You’ll learn how to layer backdrop filters among multiple elements, and integrate them with other CSS graphical effects to create elaborate designs.

Well, it turns out that SVG's built-in animation features were never deprecated as planned. Sure, CSS and JavaScript are more than capable of carrying the load, but it's good to know that SMIL is not dead in the water as previously

Yay, let's jump for text-wrap: pretty landing in Safari Technology Preview! But beware that it's different from how it works in Chromium browsers.

This CSS-Tricks update highlights significant progress in the Almanac, recent podcast appearances, a new CSS counters guide, and the addition of several new authors contributing valuable content.

Most of the time, people showcase Tailwind's @apply feature with one of Tailwind's single-property utilities (which changes a single CSS declaration). When showcased this way, @apply doesn't sound promising at all. So obvio


Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

SublimeText3 English version
Recommended: Win version, supports code prompts!

VSCode Windows 64-bit Download
A free and powerful IDE editor launched by Microsoft

PhpStorm Mac version
The latest (2018.2.1) professional PHP integrated development tool

WebStorm Mac version
Useful JavaScript development tools

Dreamweaver CS6
Visual web development tools
