CSS3 practical development: teach you step by step how to develop the corner effect_html/css

CSS3 practical development: teach you step by step how to develop the corner effect_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 12:00:19

Original

917 people have browsed it

Dear netizens, hello everyone, I am The Flower Will Bloom on Moshang. In today’s article, I will teach you step by step how to develop a set of pure CSS folding effect. As always, I do not provide code downloads, but I can guarantee that as long as you copy the code in the tutorial to your local computer, you will definitely get the same effect as I demonstrated. I hope you understand my intention.

Okay, let’s start today’s tutorial directly. First of all, let me show you the effect of today’s practical case:

Some people will say what is this? This is our actual development today. I will lead you to develop the folding effect in the upper right corner in the picture above.

Before I finish explaining, some people may find it difficult and incredible. I want to tell you: it’s really so easy. Please follow my breakdown below and learn step by step!

First, we create a blue area with the following code:

<!DOCTYPE html><html><head><meta charset="utf-9"><meta name="keywords" content="css,css3,实战互联网,教程"><meta name="description" content="css3实现折角效果,折角效果,css3实战尽在实战互联网" ><link rel="stylesheet" href="styles_2014080901.css"><title>CSS3实现折角效果实战开发</title></head><body><div class="note"></div></body></html>

Copy after login

接着我们给.note元素应用样式：

Copy after login

*{ /*清除所有元素的内外边距*/margin:0;padding:0;}.note { /*设置折叠样式基本属性*/width:480px;height:400px;margin:2em auto; /*调整.note元素的外边距*/padding:2em;background:#53A3B4;}

Copy after login

Now Let’s take a look at the running effect at this time:

How to achieve this folding effect? Please pay attention to my following steps.

I now use the pseudo element of CSS3 to insert a piece of content into the page. " "; Since pseudo-elements are inline elements by default, if you want to set the width and height, you must explicitly set it to block. If you have more detailed information about relative pseudo-elements, please pay attention to my space.

The pseudo element is created, but I want the element I created to be in the upper right corner of the .note area. Well, we can adjust the position of the element through position's relative (relative positioning) and absolute (absolute positioning).

.note:before {content:"";display:block; /*伪元素默认是行内元素，所以如果要设定宽高，这必须显性设置为block*/border-width:0 16px 16px 0; /*设置边框宽度*/border-color:#fff #fff transparent transparent; background:transparent;border-style:solid; /*设置边框为固体的*/width:0; /*设定新创建的元素*/}

Copy after login

Apply position:relative (relative positioning) to .note:

Then use the absolute positioning attribute to make our newly created The object is located in the upper right corner of the container:

.note { /*设置折叠样式基本属性*/width:480px;height:400px;margin:2em auto; /*调整.note元素的外边距*/padding:2em;background:#53A3B4;<strong> position:relative;</strong>}

Copy after login

At this point, let’s take a look at the effect:

Great, the missing corner has been realized . We said at the beginning that the folded corners have a shadow effect. Now let’s add a shadow style to .note:before:

.note:before {content:"";display:block; /*伪元素默认是行内元素，所以如果要设定宽高，这必须显性设置为block*/border-width:0 16px 16px 0; /*设置边框宽度*/border-color:#fff #fff transparent transparent; background:transparent;border-style:solid; /*设置边框为固体的*/width:0; /*设定新创建的元素*/ position:absolute; /*相对于父容器绝对定位，设置偏移父容器边框距离*/ top:0; right:0;}

Copy after login

Now let’s take a look at the effect after adding the shadow style:

/*设置元素的阴影效果*/-webkit-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);-moz-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);

Copy after login

At this point, you’re done. It turns out that it’s so simple to use pure CSS3 to achieve the folding effect.

Because it is for display, I set a fixed height. If you want to make it flexible, you can cancel its attribute.

For more practical tutorials, please continue to pay attention to my space. Thank you for reading.

Welcome to join the Internet technology exchange group: 62329335

Personal statement: The blog posts shared are absolutely original, and we strive to make every one of them original. Knowledge points are verified through practical demonstrations.