A business scenario requires a border component triangle border and a component with an arc

  1. Google did a bunch of four right angles at most but the business needs three right angles and one arc the rest of the time four right angles
  2. Final implementation:

3. Changed after N modifications

Solution ideas

  1. The first thing I found on the web was that most of it was done with a background gradient and it didn’t work because of the curved borders.
  2. I started to use pseudo classes to solve the problem. Arcs could not be solved with pictures because the project was on a large screen. Once I put the pictures on a large screen, the pixels would be blurred and it was difficult to cut images
  3. There is no way but to use div to solve arcs and use border-radius to solve problems

The concrete solution

  1. It’s a lot easier to just do div
  2. We’ll start with a div border as the outer border
  3. Make four frames as corners
  4. The four corners are positioned by relative paths
  5. The calc() method of less is required for accurate calculation
  6. Pass values using props
  7. Use SLOit as a content slot

You need parameters and parameter actions

  1. For example, if you are bending at the bottom right corner, pass the value ‘0 0 20px 0’.
  2. ArcSrc: there’s a total of topLeft topRight, bottomLeft, bottomRight so if you’re bending at the bottomRight you pass ‘bottomRight’
  3. Colors: As the name suggests, this is the border color because the border is different from the four corners, so it needs to be a color. For example, the inner border is # 2d6C90 and the four corners are # 153a4F. You should pass: [‘# 2d6C90 ‘,’#153a4f’]

complete

The specific code can be clicked on my Github address because CSS – Model is used, you can modify according to the specific business is not difficult to the main idea is ~~~

Github address click