Pure CSS Implementation picture

In web development, the CSS code can also be used to implement some simple pictures, of course, if you have patience, you can also achieve more complex pictures oh.

Then ask why there are pictures do not use and need to use CSS to achieve it? First, because of performance reasons, the picture to the server and the client pressure than a few lines of CSS code is much larger, and second, because there is no need, some simple effect using CSS can be directly completed, why also need to bother to introduce pictures?

For example, the famous bootstrap in the selection list of the lower triangle is implemented through CSS. The effect is as follows:

The implementation code is as follows:

<ul><li class= "dropdown" >dropdown</li></ul>.dropdown:after {position:absolute;width:0; HEIGHT:0;MARGIN-TOP:8PX;MARGIN-LEFT:5PX;DISPLAY:INLINE-BLOCK;BORDER-LEFT:6PX Solid transparent;border-right:6px Solid transparent;border-top:6px solid #000000; content: ";}

As you can see, the principle of triangle implementation is actually using Border-left,border-right and border-top. Displays the bounding area of the triangle by setting the left and right borders to transparent.

Code Location: HTTP://RUNJS.CN/CODE/O3MIEHQR

Here is another interesting application, many sites, when the picture is not loaded, there is an alternative image to replace, as follows:

In fact, this image is implemented through CSS code. The code is as follows:

<! DOCTYPE html>
 Code Location: HTTP://RUNJS.CN/CODE/ZJ0BBJPW
The principle is to construct triangles and circles. The use of border and Border-radius. Therefore, CSS implementation of the image in the application is still quite extensive.
Pure CSS Implementation picture