Triangle of CSS Box model

Source: Internet
Author: User

Introduction box model on W3:

Here's the tutorial, but it's too simplistic, Http://www.w3.org/community/webed/wiki/CSS/Training/Box_model.

, the box model and background properties control which parts.

Here the regular specification directory: HTTP://WWW.W3.ORG/TR/CSS21/COVER.HTML#MINITOC, find 8 Box model open

Or the Chinese w3school http://www.w3school.com.cn/css/css_boxmodel.asp

The above map is similar, but lacks the boundary border how to draw the question. For example, test:

Here Http://www.w3school.com.cn/tiy/t.asp?f=csse_border-color also, but too small, focus can be defined in 4 colors.

<style type= "Text/css" >    div.fourcolors    {        width:60px;         Height:20px;         border-width:22px;         border-style: solid;         border-color: #ff0000 #00ff00 #0000ff rgb (250,0,255)    }</style>

You can see that the boundary is diagonal, each side is a trapezoid, the order should be TRBL (Top, right, Bottom, left).

A triangle is seen in the height of the inline change.

Inline changes width, 4 triangles appear.

The two changes the style so that the right bottom left 3 triangles do not appear, that is, transparent and the same background.

IE6 does not support transparent Ah, the right lower left 3 triangles will be black.

The workaround is to set the remaining three edges of the border-style to dashed to achieve a transparent effect.

The reasons are:

IE6 display transparent does not work, the default other three border is black.
Here's a neat relationship, the value of width or height (depending on what shape you want.) The left and right arrows are related to height values, and the up and down arrows are related to width values. In the Border-width value of 3 times times the dashed is not displayed, that is to say we take advantage of the IE6 this bug, the page is OK.

One sentence summary: IE6 does not support transparent, conditional support dashed.


After understanding the principle, we can use it flexibly, for example rotate 90 degrees, the arrow left or right, nothing but change the color value of the other side. Make trapezoid, change width and height value: Width is not equal to height.
Border-style:dashed randomly changes the width and height of the value, interested people can play with their own. But the IE6 support is not good, or the previous said: width or height of the value should be in the value of Border-width 3 times times to display. Even if the display, ie and non-ie effects are not exactly the same.

Online View: Http://runjs.cn/code/32zwhknk

The general code is similar to this:

/*face down Triangle, top of the Boder style, color, etc. need to display control*/Div.triangle-arrow-down{width:0px;Height:0px;Overflow:Hidden;/*here set overflow, font-size, Line-height*/font-size:0;/*because, although the width of the height is 0, but under the IE6 will have the default, reflected in the left and right direction*/Line-height:0;/*font size and line height, resulting in the box being stretched long rectangle*/Border-width:22px;Border-style:solid dashed dashed dashed;/*IE6 below does not support transparent*/Border-color:#ff0000 Transparent Transparent transparent; }

22

Triangles CSS Triangle Tips

22

Reference:

Http://www.w3.org/TR/CSS21/box.html

Http://crossjae.diandian.com/css/border01

Triangle of CSS Box model

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.