How to implement wavy line border in css

How to implement wavy borders in css: First create an HTML sample file; then create a p tag; and finally implement wavy borders through radial gradient "radial-gradient".

The operating environment of this article: Windows7 system, HTML5&&CSS3 version, Dell G3 computer.

How to implement wavy border in css?

CSS3 radial gradient radial-gradient method to achieve wavy borders and inner chamfers

Preface

The boss gave me a picture When I looked at the coupon image (as shown below), I realized that the wavy border and inner chamfering could not be written using CSS, so I explained it to the boss and asked for a UI cutout. The boss replied: CSS3 can do it. Well, the bosses have said that it can be realized, why don’t you hurry up and ask Brother Gu to Du Niang.

Implement internal chamfering

The code above, and then explain the style of the code

<p class="radial-gradient"></p>
<style>
.radial-gradient {
    width: 200px;
    height: 100px;
    position: relative;
    background-image: radial-gradient(circle at right top, #fff, #fff 10px, transparent 11px),
           radial-gradient(circle at right bottom, #fff, #fff 10px, transparent 11px);
    background-color: red;
}
</style>

.radial-gradient No need to explain, anyone who knows some CSS will know it. The key is the .radial-gradient:after style.

Focus on explaining what the radial-gradient (circle at right top, #fff, #fff 10px, transparent 11px) style is for.

circle represents a circular gradient. To put it simply, it is to draw a circle. To draw a circle you need to know the origin.

circle at right top The right top in circle at right top is the origin position. Here the origin position is relative to the coordinates of the container. Right means the rightmost side of the container, and top means the top side of the container, in other words, the upper right corner.

circle at right top The #fff, #fff 10px, transparent 11px behind are the lengths of various color gradients starting from the origin.

Code #fff, #fff 10px, transparent 11px The first #fff means that the origin is #fff color, #fff 10px means that the distance from the origin radius of 10px is all #fff color, transparent 11px means The color is transparent from 10px to 11px from the origin. Since no other colors are set, the color is transparent after 11px from the origin.

Summary radial-gradient(circle at right top, #fff, #fff 10px, transparent 11px), is to draw a circle with the upper right corner of the container as the origin, with a radius of 10px The color inside is #fff, and the color within the radius greater than 10px is transparent.

This forms an inner chamfer in the upper right corner

Same as radial-gradient(circle at right bottom, #fff, #fff 10px, transparent 11px); I won’t explain it.

Implement the wavy border

Above the code, add a css style

<style>
.radial-gradient:after {
    content: &#39;&#39;;
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: -5px;
    width: 10px;
    height: 100%;
    background: radial-gradient(circle, #fff, #fff 4px, transparent 5px);
    background-size: 10px 10px;
}
</style>

background: radial-gradient(circle, #fff, #fff 4px, transparent 5px); There is no word at right top here, which means that the origin is at the center of the container. #fff, #fff 4px, transparent 5px means that the color within the radius of 4px is #fff color, and the color within the radius greater than 4px is transparent color. . In this way, there is a #fff color circle with a diameter of 8px located in the center of the container (the container here is: after).

(The background blue is for demonstration effect)

Add background-size: 10px 10px; set the background size to 10px wide and 10px high, so that multiple diameters can be achieved An 8px circle of #fff color.

(The background blue is for demonstration effect)

left: -5px; Offset 5px to the left, so that only half of :after is inside the .radial-gradient container

Finally attached is the rendering

##Summary

To achieve internal chamfering is actually to draw a circle with #fff color. Only one quarter of the circle is in the container to achieve the wavy border. In fact, it is to draw multiple circles of #fff color, and only half of the circle is in the container.

[Recommended learning:

css video tutorial]

The above is the detailed content of How to implement wavy line border in css. For more information, please follow other related articles on the PHP Chinese website!