css-implements triangles, trapezoidal, parallelogram, circles, ellipses, dialogs, adaptive squares

The length of this article, I hope to adhere to read, reproduced please indicate the source, if you feel good text please give a praise

CSS implementation trapezoid

CSS implementation of the triangle and trapezoidal mainly rely on border is trapezoidal characteristics to do, a bit like the picture frame of that feeling.

First, let's set a wide border for a square. As follows.

<div id= "Test1" ></div>    <style> #test1 {    width:50px;    height:50px;    Background:purple;    border-top:50px solid red;    border-bottom:50px solid Green;    border-left:50px solid blue;    border-right:50px solid yellow;    margin:0 Auto;} </style>

Then set the other colors to invisible colors and we get the trapezoid

<div id= "test2" ></div><style>    #test2 {        width:50px;        height:50px;        background:transparent;        border-top:50px solid transparent;        border-bottom:50px solid Green;        border-left:50px solid transparent;        border-right:50px solid transparent;    } </style>

CSS implementation triangles

The triangle is the same, as long as the middle square of the width of the height set to 0 on the line, as follows

<div id= "test3" ></div><style>    #test3 {        width:0;        height:0;        Display:inline-block;        background:transparent;        border-top:50px solid transparent;        border-bottom:50px solid Green;        border-left:50px solid transparent;        border-right:50px solid transparent;    } </style>

In addition, we can get different triangles or trapezoidal CSS implementations by setting the width or color of the various borders parallelogram

Since we have triangles and trapezoidal or rectangular, we can get parallel four-sided type!!!!

First, let's start with two triangles, as follows

By moving the two triangles to the next position through the transform attribute in the CSS3, you can implement your own requirements.   Of course you can also use absolute positioning to move. CSS Implementation Circle

A circle can be implemented using the CSS3 property Border-radius.

<div id= "Circle" ></div><style>    #circle {        width:100px;        height:100px;        Background:blue;        border-radius:50px;    } </style>

CSS Implementation ellipse

That's when we're going to have a good understanding of the Border-radius property, Border-radius has a horizontal radius and a vertical radius.

Border-radius: Horizontal radius/vertical radius;//The horizontal and vertical radii of a corner can also be set individually

Border-radius: Upper-Left horizontal radius, upper-right corner horizontal radius, lower-right horizontal radius, lower-left horizontal radius/upper-left vertical radius, upper-right corner vertical radius, lower-right corner vertical radius, lower-left vertical radius

Okay, so we can make an oval.

<div id= "Oval" ></div><style>    #oval {        width:100px;        height:50px;        Background:blue;        border-radius:50px/25px;    } </style>

Equivalent to

<div id= "Oval" ></div><style>    #oval {        width:100px;        height:50px;        Background:blue;        border-top-left-radius:50px 25px;        border-top-right-radius:50px 25px;        border-bottom-left-radius:50px 25px;        border-bottom-right-radius:50px 25px;    } </style>

CSS Implementation dialog box

Well, with the previous triangles and ovals, we can form a variety of dialogs. ~~~~~~

The main principle of implementation is to form a sharp corner of the dialog box by "overlay overlay" of two triangles.

Example 1:

CSS "Implement dialog box effect one

<div class= "Test1" >    <div class= "bot" >&nbsp;</div>    <div class= "Top" >&nbsp; </div>    CSS Implementation dialog box effect one </div><style>.test1{width:300px;height:30px; padding:30px 20px; margin-left:100px; Background: #eb7956; Position:relative;}. Test1 div{width:0; height:0; position:absolute;}. Test1. bot{    border-width:20px;    Border-style:solid;    Border-color: #ffffff #eb7956 #eb7956 #ffffff;    left:-40px;    top:40px;}. Test1. top{    border-width:10px 20px;    Border-style:solid;    Border-color:transparent  #ffffff #ffffff transparent;    left:-40px;    top:60px;} </style>

Example 2:

CSS Implementation dialog box effect two

<div class= "Test2" >    <div class= "bot" ></div>    <div class= "Top" ></div>    CSS Implementation dialog box effect e two </div><style>    . test2{width:300px; padding:30px 20px; border:5px solid #beceeb; Position: relative;}    . Test2 div{width:0; height:0; font-size:0; overflow:hidden; position:absolute;}    . Test2 div.bot{        border-width:20px;        Border-style:solid dashed dashed;        Border-color: #beceeb transparent transparent;        left:80px;        bottom:-40px;    }    . Test2 div.top{        border-width:20px;        Border-style:solid dashed dashed;        Border-color: #ffffff transparent transparent;        left:80px;        bottom:-33px;    } </style>

Example 3

<div class= "Test3" >    <div class= "bot" >&nbsp;</div>    <div class= "Top" >&nbsp; </div>    CSS Implementation dialog box effect three </div><style>.test3{    width:300px;    height:30px;    border-radius:160px/45px;    padding:30px 20px;    margin-left:100px;    Background: #eb7956;    Position:relative;}. Test3 div{width:0; height:0; position:absolute;}. Test3. bot{    border-width:20px;    Border-style:solid;    Border-color:transparent #eb7956 #eb7956 Transparent;    left:-30px;    top:40px;}. Test3. top{    border-width:10px 20px;    Border-style:solid;    Border-color:transparent  #ffffff #ffffff transparent;    left:-30px;    top:60px;} </style>

In addition, some bugs under IE6 need to be compatible

1. IE6 of odd and even bugs
If you position the outer frame height or the width is odd, then IE6, the low and right positioning of the absolute positioning element will have a 1 pixel error. Therefore, try to ensure that the height or width of the outer frame is even value.

2. IE6 empty div inexplicable height bug
IE6, empty div will have inexplicable height, that is to say height:0, not to do, at this time the sharp angle of the actual accounted for higher than other browsers are different. can use font-size:0; + overflow:hidden; fix the problem.

3. IE6 does not support solid border transparent transparent properties
IE6 does not support the solid border transparent transparent property, when a border is set to the transparent property and has a width, then transparency is displayed in the default black. There are two solutions, one is the need to hide the color set to the background color, so as with the transparency effect, this method has limitations, in the complex "border method" application is not feasible, the second is to use dashed instead of solid, you can achieve IE6 under the border transparent transparent. Why can transparency be achieved? You can refer to this article Dotted&dashed Ultimate analysis and IE6 transparent border, I said humorous, its explanation of the reason seems to say, but, is not so, I am quite skeptical, I have not yet had time to verify that this can be labeled.

Reference: CSS Implementation bubble border

CSS Implements adaptive squares

Square should everyone, so how to achieve the adaptive square? There are two ways

Method One: Use Padding-bottom to implement a square

Using Padding-bottom to implement squares

<div id= "Test7" >    <div class= "placeholder" > Implement square Padding-bottom with </div></div><style >    #test7 {        width:400px;        Background:gray;    }    . placeholder {        width:30%;        padding-bottom:30%;/* padding percent is calculated relative to the parent element width, padding to fill        the height*/height:0;/* avoid being stretched by the content of the extra height *        /background: # 4ACFFF;    } </style>

Method Two: Use CSS3 unit VW

The principle is the same as padding, is also the use of VW is relative width, but pay attention to the relative window width OH

<div class= "VW" ></div><style>    . VW {        width:50%;        HEIGHT:50VW;        Background:pink;    } </style>

Additions: Units in CSS

• PX: Absolute Unit, page by exact pixel display
• EM: Relative units, the reference point is the size of the parent's font, if you define the font-size by itself (the browser default font is 16PX), the entire page 1em is not a fixed value.
• REM: relative unit, can be understood as "root em", relative to the root node HTML font size to calculate, CSS3 new attributes, chrome/firefox/ie9+ support
• Vw:viewpoint width, window width, 1vw equals 1% of the window width.
• Vh:viewpoint height, window height, 1VH equals 1% of the window height.
• The smaller of the VMIN:VW and VH.
• The larger of the VMAX:VW and VH.
• VW, VH, VMIN, vmax:ie9+ partial support, Chrome/firefox/safari/opera support, iOS Safari 8+ support, Android browser4.4+ support, Chrome for ANDROID39 support
• %: Percent
• In: Inch
• CM: cm
• MM: MM
• Pt:point, about 1/72 inches
• Pc:pica, about 6PT,1/6 inches
• Ex: the height of the x of the font for the current effect, calculated as 0.5em without determining the x height (IE11 and below are not supported, Firefox/chrome/safari/opera/ios safari/android browser4.4+ Equal required attribute plus prefix)
• CH: Based on the "0" character in the font used by the node, 0.5em (Ie10+,chrome31+,safair7.1+,opera26+,ios Safari 7.1+,android browser4.4+ support) is not found

Category: H5+CSS3

css-implements triangles, trapezoidal, parallelogram, circles, ellipses, dialogs, adaptive squares