CSS make small triangles (very useful OH)

Source: Internet
Author: User

The following is reproduced from: http://www.cnblogs.com/huangzhilong/p/5030659.htmlPre-knowledge

When we set a div with its width and height of 100px, and set its four border width to 100px, and set its color separately, we can see one of the following pictures

At this point, if you set the height of this div to 0, the rest will be the same.

Below the width is also set to 0, get the following picture

Formal explanation

When we set the code below and assign it to the div corresponding property

[CSS]View PlainCopy  
  1. #sider2 {
  2. width: 100px;
  3. height: 100px;
  4. border-top: 30px solid #000;
  5. border-right: 30px solid #ff0000;
  6. border-left: 30px solid #00ff00;
  7. border-bottom: 30px solid #0000ff;
  8. }

You'll get a picture like this.

Then when the Border-bottom is not set, that is, the default is 0 o'clock, you can get the following picture

Then when you set its width to 0 o'clock, such as

Continue to set its height to 0

Finally, if you set the border-left,border-right to transparent, you can see the following triangles.

Implement a right triangle, then the last need two border edge of the use, the browser will automatically do some "stretch transform" after you can get a right triangle.

[CSS]View PlainCopy 
    1. #triangle-topleft {
    2. width: 0;
    3. height: 0;
    4. border-top: 100px solid red;
    5. border-right: 100px solid transparent;
    6. }

PS: To draw a triangle must be a block element, after and before shoddy is the inline element, must be defined as Inline-block or block before drawing

Ps:input does not support pseudo-elements (: After,:before). : Before and: After pseudo-elements specify the contents of an element before and after the document tree content. As DOM elements, pseudo-elements are rendered within a container. Elements such as Input,img,iframe cannot contain other elements, so it is not possible to insert content through pseudo-elements.

CSS make small triangles (very useful OH)

Related Article

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.