sequence

When it comes to div shapes, most people think of circles or squares, and these two shapes already fit 95% of the application scenarios in the front end. “But being a programmer who doesn’t want to go with the flow is about making things happen.

compatibility

Sure enough, what limits our creativity is not imagination, but compatibility. Support browser version is on the high side, if you are doing serious projects or do not recommend using, if it is your own or more trendy projects, then open up! There are thousands of roads, but one is compatible. It’s risky to try something new. . -webkit-clip-path: polygon()

A few small cases to worship heaven first

  1. circular= >watermelon

clip-path: polygon(100% 100% , 0 100% , 50% 0 );

  1. A square= >triangle

clip-path: polygon(0 0 , 0 100% , 100% 50% );

  1. A square= >The arrow

clip-path: polygon(100% 50% , 0 100% , 50% 50% , 0 0);

  1. The oval= >diamond

clip-path: polygon(50% 100% , 100% 10% , 0 10%);

Analysis of theclip-path:polygon()

Start by drawing an analysis diagram based on the triangle above

You can see that the parentheses consist of a pair of values. In the current div, the corresponding x and y coordinates are received in units of px or %(the recommended percentage), separated by commas. The values written after the comma represent a new point. The new point will be connected to the original point, and the number of points is not limited.

Two questions:
  1. Once you have more points, you have a bunch of coordinates. The eye looks flower, revise also inconvenient.
  • Since you’ve done the front end, you must have mastered psychic skills:

Firefox has good support for debugging this propertyCopy the code

Click on the icon next to the property and the line can be dragged around, automatically adjusting depending on whether you are '%' or 'px'Copy the code
  1. Dots can only be connected in straight lines, so if I want to draw a shape with arcs, wouldn’t I have to build countless dots?

  • Unfortunately, this property also has the corresponding clip-path:circle() and ellipse(), but they cannot be used together. And because the property is clipped, it will be clipped whenever it goes beyond the line, so try filling the arc with ::after or ::befor.

  • Another disadvantage is that the extra parts are not displayed, and the normal box-shadow is based on the shadow of the box, and the shadow of course is cropped out.


    So you need to givebox-shadowAdd an inner shadowbox-shadow: inset 3px 2px 16px #bbb;(The shadows won’t be based on your lines, they’ll be based on the box, so it’s a matter of opinion.)

Analysis of theclip-path:circle() 与 clip-path: ellipse()

clip-path:circleIs used for clipping circles and units are also supportedpxwith%, which provides three parameters(Circle radius at x coordinate y coordinate)

clip-path: ellipseThe difference is that it breaks up the radius of the circleRadius in the x direction/Radius in the y direction

animation

Clip-path has good support for animation transitions. Here is a small demo

.demo_box{
    width: 100px;
    height: 100px;
    border-radius:50%;
    background:#ffa700;
    clip-path: polygon(0%, 100% and 100% 100%, 100%, 0% and 0% 0%, 25%, 0% 50% 50%, 0% 80%);animation:a 1s infinite alternate;
}
@keyframes a {
    0%, 10% {
        clip-path: polygon(0%, 100% and 100% 100%, 100%, 0% and 0% 0%, 25%, 0% 50% 50%, 0%, 80%)}, 90% 100% {clip-path: polygon(0%, 100% and 100% 100%, 100%, 0% and 0% 0%, 0% 50%, 50%, 60% 0% 60%)}}Copy the code

collocationshape-outsideEmbed graphics in text

Shape-outside and clip-path have the same corresponding polygon, circle and ellipse parameters. Div float is required to take effect

Free scan QR code CSS animation

The striping of the route is a problem with the screenshot tool which is actually not there.



<div class="scan"></div> 

.scan {
  width: 150px;
  height: 150px;
  margin: 30px auto;
  position: relative;
  background: linear-gradient(to left, #108EE9, #108EE9) left top no-repeat, linear-gradient(to bottom, #108EE9, #108EE9) left top no-repeat, linear-gradient(to left, #108EE9, #108EE9) right top no-repeat, linear-gradient(to bottom, #108EE9, #108EE9) right top no-repeat, linear-gradient(to left, #108EE9, #108EE9) left bottom no-repeat, linear-gradient(to bottom, #108EE9, #108EE9) left bottom no-repeat, linear-gradient(to left, #108EE9, #108EE9) right bottom no-repeat, linear-gradient(to left, #108EE9, #108EE9) right bottom no-repeat;
  background-size: 3px 20px.20px 3px.3px 20px.20px 3px;
}

.scan::after {
  content: ' ';
  width: 140px;
  border: 1px solid #BBE2FF;
  position: absolute;
  left: 5px;
  top: 2px;
  animation: myfirst 4s infinite;
}
@keyframes myfirst {
  from {
    top: 2px;
  }
  to {
    top: 144px; }}Copy the code