有曲线的背景，可能吗？

Question

Should I spend a time to find a solution in CSS to apply it, or just added as a static background image.

I need to know if I can do something like in the attached image in CSS or not? if yes how, please?

Answer 1

SVG is the recommended way to create such shapes. It offers simplicity and scale-ability.

We can use SVG 's path element to create a shape like above and fill / stroke it with some solid color, gradient or a pattern.

Only one attribute d is used to define shapes in path element. This attribute itself contains a number of short commands and few parameters that are necessary for those commands to work.

Following code will create the above shape:

<path d="M-10,43
         Q7,40 18,30
         T42,41 T65,64 T92,32 T133,31 T167,17 T218,61 
         V240 H-180 Z" />

Below is a brief description of path commands used in above code:

• M command is used to define the starting point. It appears at the beginning and specify the point from where drawing should start.
• Q and T commands are used to draw curves.
• V and H commands are used to draw straight lines.
• Z command is used to close current path. It draws a straight line from current point to the starting point to close the shape.

Output Image:

Working Example:

 body { text-align: center; background: #ddd; } 

 <svg width="175" height="230" viewBox="0 0 175 230" preserveAspectRatio="xMidYMin slice"> <defs> <linearGradient id="grad" x2="0" y2="1"> <stop offset="0" stop-color="#f5e2ed" /> <stop offset="1" stop-color="#fff" /> </linearGradient> </defs> <path stroke="#f280ab" stroke-width="3" fill="url('#grad')" d="M-10,43 Q7,40 18,30 T42,41 T65,64 T92,32 T133,31 T167,17 T218,61 V240 H-180 Z" /> </svg> 

Useful Resources:

Below are some useful links for SVG :

• Specification
• MDN