CSS interesting border

CSS interesting border

Today, I saw an article that used CSS borders to make origami. It was very interesting. So I studied the border of CSS and found that there were some interesting usage.

The first step is the HTML code. For simplicity, a div is used:

Origami Effect

Then we add the 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. It looks like this:

Vc + 4vdqjrM7Sw8ew0bHfv/expires + 49re9z/K1xLHfv/LR1cmruMTSu8/Co7o8L3A + fill = "brush: java;">. note {display: block; margin: 100px auto; width: 100px; height: 100px; background: # ff0; border-width: 10px 10px 10px; border-color: # aa0 # f0f #512 # a21; border-style: solid ;}The effect is as follows:

3D effect instantly! We continue to rough the border, and 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 envelope effect instantly exists! We continue to set the width to 0, and the effect is as follows (the code will not be pasted ):

Does it feel like a pyramid! Now, let's get started with the origami effect. Now I think it should be SO EASY. Let's take a look at it first:

Note is the original note, but adds a before pseudo element to the note, sets the width of the pseudo element to 0, and the content to be empty, uses the border to make a triangle effect, and then absolutely locates in the upper right corner, the shadow effect is OK. The Code is as follows:

.note{display:block; margin:100px auto;width:100px;height:100px;background:#ff0;padding: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 remains unchanged, but the CSS style is changed without affecting semantics.

Add the border attribute in CSS:

In addition, border-style also has attributes that support 3D effects. The following are optional values of border-style:

If you are interested, you can try it. In addition, if you use CSS3, you can make more cool effects. Study again tomorrow ....

There is a commonly used method in the layout at ordinary times, but there are still a lot of attribute values that we don't use. It may be unexpected if we explore them! If you still have interesting borders, please share them with us ~~