CSS Interesting borders

Today saw an article, is the use of CSS border to do origami effect, it is very interesting, so on the CSS border study a bit, found that there are some fun to use.

The first is the HTML code, for simplicity, just a div:

<div class= "Note" > Origami effect </div>

We then add a border effect to it:

. Note{display:block; margin:100px auto;width:100px;height:100px;background: #ff0; border:1px solid #000;}

This is the simplest and ugliest border effect that looks like this:

Sure enough the border is too thin to see the details, let's make the border thicker, and then change the border color for each direction:

. Note{display:block; margin:100px auto;width:100px;height:100px;background: #ff0; border-width:10px 10px 10px 10px; Border-color: #aa0 #f0f #512 #a21; border-style:solid;}

The effect is as follows:

Instantly produces a 3D effect with wood there! We continue to make the border thicker, then set the height of the container to 0:

. Note{display:block; margin:100px auto;width:100px;height:0px;background: #ff0; border-width:50px;border-color:# AA0 #a21 #740 #a21; border-style:solid;}

The effect of an instant envelope has wood there! We continue to set the width to 0, the effect is like this (the code is not posted):

Is there a kind of pyramid feeling? OK, just play here, before said to do origami effect, now think about should be so easy, first look:

Note or the original note, just add a before pseudo-element, set the pseudo-element width to 0, the content is empty, use the border to make the triangle effect, and then through the absolute positioning to the upper right corner, and finally add shadow effect OK. The code is as follows:

. Note{display:block; margin:100px auto;width:100px;height:100px;background: #ff0;p adding:50px;position:relative;}. Note:before{content: ""; Width:0;border-color: #fff #fff Transparent Transparent;border-style:solid;border-width : 20px;position:absolute;top:0;right:0;-webkit-box-shadow:-2px 2px 2px rgba (0,0,0,0.3);-moz-box-shadow:-2px 2px 2px RGBA (0,0,0,0.3);        box-shadow:-2px 2px 2px Rgba (0,0,0,0.3);}

The original HTML code has not changed at all, just changed the CSS style, does not affect the semantics at all.

Also attach the properties of border in CSS:

In addition, the Border-style itself has properties that support the 3D effect, and the following are the optional values for Border-style:

Interested can try, in addition, if you use CSS3, you can make a more cool effect, tomorrow to study ....

Usually the layout of the time there is a common wording, but there are many property values we did not use, to explore the words may have unexpected surprises! If you have a frame of fun to play, welcome to share ~ ~