Home >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
- WBOYOriginal
- 2016-06-24 11:56:081113browse
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: 2fb4a54590250fa5a7111406b6c244fe16b28748ea4df4d9c2150843fecfba68
----------------------- 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 b8c713de88abd2d83347c6b37941285f16b28748ea4df4d9c2150843fecfba68, 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.