Create a small triangle problem with CSS (written test frequently)

Source: Internet
Author: User

Written questions often encountered with CSS to achieve a div border to add a triangle problem, grasp a point, reasonable use of Div's border, when the div has a wide height, the border is an obscure border, when the width of the div is 0 o'clock, the border is a small box, the remaining three edges transparent is the magic triangle.

Then is the study of CSS: Before and: After pseudo-elements, such problems are generally divided into two types, namely, solid and hollow problems.

In the DOM structure are:<Div id= "Demo"></Div >

1. Solid Triangle

This kind of problem, generally give the background color (mostly dark), there is no overall shape of the border, relatively easy to start. The idea is simple, the overall div background color, determine the length and width, relative positioning, and then use: after the pseudo-elements in the DIV after the addition of content (space), set the width of 0, to determine the width of the border, absolute positioning on the line.

#demo {    width:100px;    height:100px;    Background-color: #333;    position:relative;      } #demo: after{    border:solid Transparent;    Border-left-color: #333;    border-width:10px;    width:0;    Content: "";    Position:absolute;    left:100%;    top:10%;  }

2. Hollow Triangle

For the hollow Triangle, the design idea and the solid triangle is similar, can be regarded as two solid triangle, the outer triangle is set as the overall border color of the solid triangle, the inner layer of the small triangle is set to white solid triangle, the outer width is greater than the width of the inner layer, the visual is the Hollow triangle. The key is: Before and: after pseudo-elements corresponding to the outer triangle and the inner triangular, as well as the border size calculation. Notice the visual first: after pseudo-element style, then: before pseudo-element style, that is, when the two coincide, the after pseudo-element is first seen.

For the Hollow Triangle Design (border-width:2px), the code is as follows:

#demo {    width:100px;    height:100px;    Background-color: #fff;    position:relative;    border:2px solid #000;    /* Overall color border is black */}/* small triangle */#demo: after{    border:solid Transparent;    Border-left-color: #fff;    border-width:10px;    Content: "";    Position:absolute;    left:100%;    top:20px;    /*20px*/}/* Grand Triangle * * #demo: before{    border:solid Transparent;    Border-left-color: #000;    border-width:12px;   /*10px+2px*/    content: "";    Position:absolute;    left:100%;    top:18px;    /*20px-2px*/}

Note that in CSS3,: Before and: After pseudo-elements are represented as:: Before and:: After form, in order to be compatible with IE8, it is recommended to write a single colon.

Create a small triangle problem with CSS (written test frequently)

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.