CSS makes tips boxes, bubble boxes, and triangles
|
Sometimes our pages will need some prompt boxes or bubble boxes. Using CSS, we can achieve this effect. In order to achieve the above effect, we must first understand how to make a triangle. When we give a DIV a border of different colors, we can get the following effect.
.triangle{
border-top:20px solid red;
width:50px;
height:50px;
border-right:20px solid blue;
border-bottom:20px solid gray;
border-left:20px solid green;
}You can see that the four borders have become trapezoidal shapes instead of the rectangular shapes we thought. When we change the width and height of the box to 0 , the four borders will start from the center point and become four triangles.
.triangle{
border-top:20px solid red;
width:0px;
height:0px;
border-right:20px solid blue;
border-bottom:20px solid gray;
border-left:20px solid green;
}
In this way, when we only need one triangle, we just need to set the other border colors to transparent. For example, we only keep the upward-facing triangles
.triangle{
border-top:20px solid transparent;
width:0px;
height:0px;
border-right:20px solid transparent;
border-bottom:20px solid gray;
border-left:20px solid transparent;
}
Now that we know how to make a triangle, we can use pseudo-classes and absolute positioning to make a bubble frame, for example:
.container{
position:relative;
margin-top:50px;
padding:6px 12px;
color:#fff;
font-size:16px;
line-height:25px;
width:200px;
height:50px;
background-color:orange;
border-radius:4px;
}
p.container:after{
position:absolute;
top:-40px;
right:20px;
border-top:20px solid transparent;
content:" "; // Don't omit the content, otherwise it won't be displayed width:0px;
height:0px;
border-right:20px solid transparent;
border-bottom:20px solid orange;
border-left:20px solid transparent;
}
<p class="container">
Hi, this article will teach you how to use CSS to create a bubble frame.
</p>
A simple bubble frame is ready. The triangular shape can be assembled according to actual needs. The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM. |
<<: Specific use of ES6 array copy and fill methods copyWithin() and fill()
>>: 5 super useful open source Docker tools highly recommended
Recommend
Detailed tutorial on installing MySQL 8 in CentOS 7
Prepare Environmental information for this articl...
A brief discussion on MySQL index optimization analysis
Why are the SQL queries you write slow? Why do th...
How to automatically backup mysql remotely under Linux
Preface: Basically, whether it is for our own use...
Example of implementing a virtual list in WeChat Mini Program
Table of contents Preface analyze Initial Renderi...
Specific use of Bootstrap5 breakpoints and containers
Table of contents 1. Bootstrap5 breakpoints 1.1 M...
MySQL full-text search Chinese solution and example code
MySQL full text search Chinese solution Recently,...
Things about installing Homebrew on Mac
Recently, Xiao Ming just bought a new Mac and wan...
Detailed explanation of KVM deployment of three virtual machines to implement WordPress experiment
1. Introduction to KVM The abbreviation of kernel...
Detailed explanation of the observer mode starting from the component value transfer of Vue
Table of contents Observer Pattern Vue pass value...
JavaScript to achieve simple tab bar switching case
This article shares the specific code for JavaScr...
Solution to the problem that the Vue page image does not display
When making a new version of the configuration in...
Detailed explanation of fs module and Path module methods in Node.js
Overview: The filesystem module is a simple wrapp...
Sample code for implementing form validation with pure CSS
In our daily business, form validation is a very ...
Detailed description of ffmpeg Chinese parameters
FFMPEG 3.4.1 version parameter details Usage: ffm...
Comparison of the use of form element attributes readonly and disabled
1) Scope of application: readonly:input[type="...