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

Source: Internet
Author: User
Tags border color

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 ...

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.