[CSS] use pseudo elements to implement some special images from baidu, css

[CSS] use pseudo elements to implement some special images from baidu, css

I recently saw a baidu school recruitment question posted by someone in the blog Park, saying that the following figure should be implemented using a line of html code:

　　　　　　　　　　

The given html code is: <div class = 'square '> </div>

----------------------- The above background ------------------------------

　　　

Of course the square is very easy to do, but the small-angle logo highlighted on the right has to be figured out by yourself. Therefore, since there is no such thing, it is natural that the pseudo elements in CSS are used.

This shape is similar to the small bubbles we often encounter and the drop-down bar.

　　

We usually add small icons to achieve this by adding image resources and modifying the html structure.

CSS pseudo elements

In css, there are four pseudo elements: first-line, first-letter, before, and after. The first two selected are the first text and the first letter in the target element. You can add extra styles to the element.

Before and after are the most common pseudo elements, which are used differently from the first two, and are more useful.

: Before,: after is used to add the specified content before and after the current element respectively. The example is as follows:

　　

<! Doctype html> 
Running result of the above Code
We can think that the two pseudo elements before and: after are the two elements added before and after the current p tag, but we should also find the width: 100px written in p: after; it does not work. This shows that the display of pseudo elements is inline rather than block.
There are several notes for pseudo elements:
1. the pseudo element is displayed as inline in the element, so you want to use the pseudo element to achieve more results. For example, in the above question, you must use the pseudo element as a block element.
2. The content in the pseudo-element list attribute is required. Even if the content is empty, the content cannot be empty. Otherwise, the content will not be displayed.
3. In addition to text, the pseudo-element content can also be set as an image, for example, p: before {content: url(icon.gif );}
4. the pseudo elements are now available in IE8 and later browsers.

 
Make a triangle or other shape with CSS
After understanding the pseudo elements, You can implement the above questions. Obviously, a triangle is made through a pseudo element. How can this problem be solved?
It is easy to implement a triangle using CSS code. You can write it after a try: the html code is <div class = "triangle"> </div>, and the css code is as follows:
. Trangle {width: 0; height: 0; border: 40px solid; border-color: transparent # F00 ;}
Other shapes are similar. This is achieved by setting different border-radius and border-width. However, if there is a problem with compatibility, IE9 and later will be normal (naturally it is a problem with border-radius ).
　　　　
However, it can be seen that the elements are outlined by border, but the triangle in the question has a black border. Obviously, it cannot be done by a pseudo element, so the two are together.
You can set the position: absolute and z-index attributes of pseudo elements to form the superposition of pseudo elements. The bottom layer is black and the top layer is white.
The specific implementation code of CSS in 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;} 
 
　　　　　　
Of course, you can also implement more complex graphics, such as the following two: (Taiji on the left is, Pepsi on the right is written for testing)
Taiji: Pepsi Logo under IE8 (23333 ):
　　　　
Well, that's it. how to use it.
--------------------------- Ended ---------------------------------
At the end of my junior year, I had fewer courses and less outsourcing services. I had nothing to read books and write something interesting. I was preparing for next year's internship school recruitment, while consolidating the foundation.
　　　　

Functions of pseudo-element after in CSS
The main function is to use pseudo elements to decorate the content (whether decorative images or sound effects) without modifying the HTML content, so as to better separate the content from the style. This is because adding an element to HTML simply to draw a triangle used for decoration is unnecessary for actual content, the Semantic Analysis of web pages may also have a negative impact (depending on the specific implementation of the analysis program ).
It should be said that the original intention of the: before AND: after pseudo elements is still to insert content-not restricted by the document, and does not affect the document itself (for example, does not affect the DOM ), only the final style is affected.
The example given in the CSS specification is typical: p. note: before {content: "Note:"} -- the inserted content is not actually the actual content, but is actually a text style, so it is not necessary to repeat it in HTML, it will be nice to generate the Code with CSS.

However, the most common application scenario is to use them as empty elements such as content: ", and then add various styles to this empty element. In this way, only the "existence" of the element (rather than the content of the element) is used, which is a clever hacking.
 
How to Use HTML and Css to implement this image
1. Define one <DIV> </DIV> first. It is best to set one ID number for it. You need to set the width and height in CSS.
2. The product category and all categories are a gradient image. You can set the image in CSS as the background of the above DIV and align the top.
3. household Appliances books mobile digital daily necessities these four can use the <H1> </H1> label, then define its word color (yellow) and background color in CSS. (light gray)
4. The <UL> <LI> </UL> label can be used for specific varieties under each category,