Web Front-end
HTML Tutorial
[CSS] Use pseudo elements to realize some special graphics from baidu school recruitment_html/css_WEB-ITnose
[CSS] Use pseudo elements to realize some special graphics from baidu school recruitment_html/css_WEB-ITnose
I recently saw a Baidu recruitment question posted by someone on the blog, saying that a line of html code is needed to realize the following graphic:
The specified html code is:
----------------------- The above is the background---------------------------------
Of course squares are easy to make , but you have to figure out a solution for the small corner mark protruding from the right side. Therefore, since there is no such thing, it is natural to use pseudo elements in CSS.
This shape is similar to the small bubbles and drop-down bars we often encounter
Usually we usually achieve this by adding small icons, not only do we need to add pictures Resources, you also need to change the html structure.
CSS pseudo-elements
There are four pseudo-elements in css, namely: first-line,:first-letter,:before,:after. The first two select the first line of text and the first letter in the target element respectively, and you can add extra styles to them.
The most commonly used ones are :before and :after. These two pseudo-elements have different usages from the first two, and are more useful.
:before,:after are used to add specified content before and after the current element respectively. The specific usage examples are as follows:
<!doctype html><html><head><meta charset="utf-8"><title>CSS输出各种图形</title><style type="text/css"> p:before{ content:"开始"; color:#F00; font-size:12px; } p:after{ content:"结束"; color:#003; font-size:30px; border:1px solid #000; width:100px; }</style></head><body> <p>伪元素 测试</p></body></html>The running result of the above code is as shown in the figure:
It can be considered that the two pseudo elements: before and :after are the two elements added before and after the current p tag, but you should also find that writing in p:after The width:100px; did not work, which means that the pseudo-element is displayed inline, not block.
As for pseudo-elements, there are several things to pay attention to:
1. Pseudo-elements are displayed inline inside the element, so you want to use pseudo-elements to achieve more effects, such as the question above , you must use the pseudo element as a block element.
2. The content in the pseudo-element list attribute is essential. Even if the content is empty, the content cannot be empty, otherwise it will not be displayed.
3. In addition to text, the pseudo element content can also be set to an image, such as p:before{content:url(icon.gif);}
4. Pseudo element Currently, IE8 and above browsers have been obtained, so you can use it with confidence.
Use CSS to make a triangle or other shape
After mastering the pseudo elements, you can achieve the above question. Obviously, a triangle is made through pseudo-elements. How to do it?
Using CSS code to implement a triangle is very simple. You can write it after trying it:, the html code is
, the css code is as follows.trangle{width:0;height:0;border:40px solid; border-color:transparent transparent transparent #F00;}
Other shapes are similar, by setting different border-radius and border-width To implement, but there is a compatibility problem, only IE9 and above will work properly (naturally it is a border-radius problem).
But it can be seen that the elements have been outlined with borders, but the triangle in the question has a black border. Obviously it cannot be done with a pseudo element, then Two together.
By setting the position:absolute and z-index attributes of the pseudo-element, an overlay of pseudo-elements is formed. The bottom layer is black and the upper layer is white.
The specific CSS implementation code of the original question is as follows:
.square{width:100px;height:100px;background-color:#FFF;position:relative;border:2px #000000 solid;}.square:before{content:"";width:0px;height:0px;display:block;position:absolute;z-index:2;top:25%;right:-28px;border:15px solid #FFF;border-color:transparent transparent transparent #FFF;}.square:after{content:"";width:0px;height:0px;display:block;position:absolute;z-index:1;top:25%;right:-30px;border:15px solid #FFF;border-color:transparent transparent transparent #000;}
Graphics, such as the following two: (Tai Chi on the left is a screenshot, and Pepsi on the right is written for testing) 3):
Well, that’s it. How to use it is a matter of opinion.
--------------------------It's over-------------- ------------------
In my junior year, I have fewer classes and less outsourcing. I have nothing to do but read some books and write something interesting while preparing for next year. Internship school recruitment is a solid foundation.
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
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
Difficulty in updating caching of official account web pages: How to avoid the old cache affecting the user experience after version update?
Mar 04, 2025 pm 12:32 PM
The official account web page update cache, this thing is simple and simple, and it is complicated enough to drink a pot of it. You worked hard to update the official account article, but the user still opened the old version. Who can bear the taste? In this article, let’s take a look at the twists and turns behind this and how to solve this problem gracefully. After reading it, you can easily deal with various caching problems, allowing your users to always experience the freshest content. Let’s talk about the basics first. To put it bluntly, in order to improve access speed, the browser or server stores some static resources (such as pictures, CSS, JS) or page content. Next time you access it, you can directly retrieve it from the cache without having to download it again, and it is naturally fast. But this thing is also a double-edged sword. The new version is online,
How do I use HTML5 form validation attributes to validate user input?
Mar 17, 2025 pm 12:27 PM
The article discusses using HTML5 form validation attributes like required, pattern, min, max, and length limits to validate user input directly in the browser.
How to efficiently add stroke effects to PNG images on web pages?
Mar 04, 2025 pm 02:39 PM
This article demonstrates efficient PNG border addition to webpages using CSS. It argues that CSS offers superior performance compared to JavaScript or libraries, detailing how to adjust border width, style, and color for subtle or prominent effect
What are the best practices for cross-browser compatibility in HTML5?
Mar 17, 2025 pm 12:20 PM
Article discusses best practices for ensuring HTML5 cross-browser compatibility, focusing on feature detection, progressive enhancement, and testing methods.
What is the purpose of the <datalist> element?
Mar 21, 2025 pm 12:33 PM
The article discusses the HTML <datalist> element, which enhances forms by providing autocomplete suggestions, improving user experience and reducing errors.Character count: 159
What is the purpose of the <progress> element?
Mar 21, 2025 pm 12:34 PM
The article discusses the HTML <progress> element, its purpose, styling, and differences from the <meter> element. The main focus is on using <progress> for task completion and <meter> for stati
How do I use the HTML5 <time> element to represent dates and times semantically?
Mar 12, 2025 pm 04:05 PM
This article explains the HTML5 <time> element for semantic date/time representation. It emphasizes the importance of the datetime attribute for machine readability (ISO 8601 format) alongside human-readable text, boosting accessibilit
What is the purpose of the <meter> element?
Mar 21, 2025 pm 12:35 PM
The article discusses the HTML <meter> element, used for displaying scalar or fractional values within a range, and its common applications in web development. It differentiates <meter> from <progress> and ex
