Home > Developer > Web Develop
Cause:
From the middle of the last month, a lot of front-end big God in the back of the clip-path development of foreign cattle with a cartoon effect, click here Worship, and then continue to see a lot of article analysis article, and then I also fart to look at the bottom of the next, probably understand the principle of the next one, now write to the right as their own notes
Instance:
Nonsense not much to say on the code
<! DOCTYPE html>Here is the CSS code
$color: Grey, $box-size:10px; @mixin margin_space ($a, $b) {margin: $a auto;padding: $b;} @mixin Tx_center{text-align:center;}. Wrap{max-width: $box-size*80; @include margin_space (0,20px);} h1{@include Tx_center;}. Test{background-color: $color; Background:url (.. /images/background.jpg) No-repeat;background-size:cover;max-width: $box-size*60;height: $box-size*40; @include Margin_space (0,0);//Only See Polygon Properties-webkit-clip-path:polygon (100px 200px,100px 300px,200px 300px,200px 200px); Clip-path:polygon (100px 200px,100px 300px,200px 300px,200px 200px);}The effect is as follows
Use of properties
polygon(<x1> <y1>, <x2> <y2>, ..., <xn> <yn>)Define the coordinates of each point, from can also be seen, starting point is from the upper left corner of the calculation, you can use hundred percent, you can also use PX and other units.Critical position Analysis
-webkit-clip-path:polygon (100px 200px,100px 300px,200px 300px,200px 200px);The first point I set here is x:100px,y:200px, the position of the second point is x:100px,y:300px, the position of the third point is x:200px,y:300px, the last point position is x:200px,y:200px, Finally, it automatically closes into a square with a width height of 100px.
Look, in fact, this is not very complicated, then what is the browser support now, look (but I found that the pure CSS shape FF is not supported.) ）
Last small benefit
Polygon if the number of nodes as much, hundred can be used transition deformation animation, before the deformation of CSS3 is generally only internal stretching, rotation and other fixed mode, now have polygon, and more infinite possibilities, as the cause of the example
Keep on code.
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title>Clip-path Practice</title> <Linkrel= "stylesheet"type= "Text/css"href= "Css/style.css"></Head><Body> <Divclass= "Wrap"> <!--title - <H1>CSS3 Clip-path</H1> <Divclass= "Test"> </Div> </Div></Body></HTML>The following CSS is from Zhang Xinxu (highly recommended)
body {Color:grey;}. Wrap {max-width:800px; margin:0 Auto; padding:20px; }h1 {text-align:center;}. Test {Background-color:grey; max-width:600px; height:400px; margin:0 Auto; padding:0; -webkit-animation:auto-transition 3s infinite alternate; Animation:auto-transition 3s infinite alternate; }@-webkit-keyframes auto-transition {0% {-webkit-clip-path:polygon (50px 100px, 160px 30px, 160px 170px); Clip-path:polygon (50px 100px, 160px 30px, 160px 170px); } 50% {-webkit-clip-path:polygon (50px 100px, 160px 30px, 160px 90px, 360px 90px, 360px 30px, 470px 100px, 360px 170p X, 360px 110px, 160px 110px, 160px 170px); Clip-path:polygon (50px 100px, 160px 30px, 160px 90px, 360px 90px, 360px 30px, 470px 100px, 360px 170px, 360px 110px, 160p X 110px, 160px 170px); } 100% {-webkit-clip-path:polygon (50px 110px, 50px 90px, 160px 30px, 260px 30px, 400px 90px, 480px 150px, 480px 50px , 400px 110px, 260px 170px, 160px 170px); Clip-path:polygon (50px 110px, 50px 90px, 160px 30px, 260px 30px, 400px 90px, 480px 150px, 480px 50px, 400px 110px, 260p X 170px, 160px 170px); }} @keyframes auto-transition {0% {-webkit-clip-path:polygon (50px 100px, 160px 30px, 160px 170px); Clip-path:polygon (50px 100px, 160px 30px, 160px 170px); } 50% {-webkit-clip-path:polygon (50px 100px, 160px 30px, 160px 90px, 360px 90px, 360px 30px, 470px 100px, 360px 170p X, 360px 110px, 160px 110px, 160px 170px); Clip-path:polygon (50px 100px, 160px 30px, 160px 90px, 360px 90px, 360px 30px, 470px 100px, 360px 170px, 360px 110px, 160p X 110px, 160px 170px); } 100% {-webkit-clip-path:polygon (50px 110px, 50px 90px, 160px 30px, 260px 30px, 400px 90px, 480px 150px, 480px 50px , 400px 110px, 260px 170px, 160px 170px); Clip-path:polygon (50px 110px, 50px 90px, 160px 30px, 260px 30px, 400px 90px, 480px 150px, 480px 50px, 400px 110px, 260px 170px, 160px 170px); } }The effect is as follows:
Tip:
polygonthe animation deformation before and after the number of coordinate points to be the same, otherwise the above by the first triangle is deformed to two triangles without excessive effect.Resources:
CSS Properties Clip-path polygon polygon Small Glimpse
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
