From NetEase Cloud's black technology, with sharp corner div ...

Today in the NetEase cloud Web version listen to the song, say Steve Vai's song is always so people can't fathom, but I still prefer Old Joe, Yi, off the topic ...

You can see the comment input box and reply box, there is a small sharp angle, the way to achieve a lot, I generally use border to do, as long as an element plus these four attributes on the line:

   border-top:400px solid red;   border-right:400px solid transparent;   border-bottom:400px solid transparent;   border-left:400px solid Transparent;

The following is to talk about NetEase cloud above the black technology, I read really is the service ...

As a program ape, look at the Web page always like the hand of the cheap censorship elements ...

Hey? What are these two little black pieces? A little thought, the original is this ....

The top layer of the small square color is a white background color, below also stacked a background color for the border color of the small square, or more intuitive:

Here are two small squares, our two small squares are position:absolute, move the right side of the small square to the left, move to immediately overwrite the left square:

OK, like this, smart you might already know what this is, assuming the background color is white and the border is red, then we just need to change the color property of the two elements:

We only need to give the parent element position:relative, the two small squares to locate the corresponding place is OK, feel can think of this method of people also pretty cow, aha.

From NetEase Cloud's black technology, with sharp corner div ...