preface

Recently, in a small program project, UI wanted me to implement a card style. This article mainly introduces how to implement concave circle. Here are two ways to implement concave circle

  • Implemented using div and border-radius layouts
  • Radial -gradient realizes inner concave circle

Implemented using div and border-radius layouts

Idea:

  • The first implementation of two view fast, up and down layout

  • Put two more views in the upper and lower views (Flex layout)

  • The child view uses border-radius to achieve a quarter circle

  • The view above with the dotted line,

The picture is as follows (I haven’t drawn any pictures before, just a few strokes)

Top and bottom layout of two Views, plus Flex layout

<view class="top-circle"> </view> <view class="bottom-circle"> </view> <style> .top-circle { width: 702rpx; height: 16rpx; display: flex; justify-content: space-between; border-bottom: 1rpx dashed #e4e5e7; // dashed line}. Bottom-circle {width: 702rpx; height: 16rpx; margin-bottom: 28rpx; display: flex; justify-content: space-between; } </style>Copy the code

Four sub-views implement arcs

<style> .top-circle { width: 702rpx; height: 26rpx; display: flex; justify-content: space-between; align-items: flex-end; .top-left-circle1 { border-top-right-radius: 16rpx; background: #f25b4f; border-bottom: 1rpx solid #f25b4f; } .top-right-circle1 { border-top-left-radius: 16rpx; background: #ed2856; border-bottom: 1rpx solid #ed2856; } border-bottom: 1rpx dashed #e4e5e7; } .bottom-circle { width: 702rpx; height: 26rpx; margin-bottom: 28rpx; display: flex; justify-content: space-between; align-items:flex-start; .bottom-left-circle1 { border-bottom-right-radius: 16rpx; background: #f25b4f; } .bottom-right-circle1 { border-bottom-left-radius: 16rpx; background: #ed2856; }}. Circle-view {// Height: 16rpx; width: 16rpx; } </style> <! <view class="top-circle"> <view class="top-left-circle1 circle-view"></view> <view class="top-right-circle1"  circle-view"></view> </view> <view class="bottom-circle"> <view class="bottom-left-circle1 circle-view"></view> <view class="bottom-right-circle1 circle-view"></view> </view>Copy the code

The implementation of div and border-radius layout is shown below

Radial -gradient realizes inner concave circle

Basic syntax:

background-image: radial-gradient(shape size at position, start-color, ... , last-color);Copy the code
value describe
shape Determine the type of the circle: Ellipse (default): Specifies the radial gradient of the ellipse. Circle: Specifies the radial gradient of the circle
size Define the size of the gradient, possible values: apaps-corner (default) : Apapany-side according to usPS.apany-side according to usPS.apany-side Specifies that the radius length of the radial gradient is from the center of the circle to the edge farthest from the center
position Define the position of the gradient. Possible values:center(Default) : Sets the ordinate value of the radial gradient center.top: Sets the top to the vertical value of the radial gradient center.bottom: Sets the bottom as the vertical value of the radial gradient center.
start-color, … , last-color Used to specify the start and end colors of the gradient.

Related understanding:

  • Size (radius of the circle) should not be greater than start-color,… , the minimum size of last-color will be invalid if it is greater than that
  • Position: Coordinates of the center of the circle are the x axis and the y axis
  • start-color, … If the two sizes are the same, there will be no gradient effect
  • Below is a rendering of the above code

The following is a demo of an inner concave circle

    .egg {
      display: block;
      margin-top: 30px;
      width: 100px;
      height: 100px;
      background-image: radial-gradient(20px at 10px 50px, #fff 20px, #4169E1 20px);
      /* background-image: radial-gradient(20px at 100px 50px, #fff 20px, #4169E1 20px); */
    }
Copy the code

To achieve two concave circles, you need to use background (background-image) to not display the image

The code is as follows

.egg { display: block; margin-top: 30px; width: 100px; height: 100px; background: radial-gradient(15px at 10px 50px, #fff 20px, #4169E1 20px) left, radial-gradient(15px at 40px 50px, #fff 20px, #4169E1 20px) right; background-size: 50% 100%; /* width height general and background-repeat: no-repeat; */ background-repeat: no-repeat; }Copy the code

Use background-size to cut the div into left and right halvesThe center of the circle on the right is calculated with the center as the dividing line

If you want to remove the white line in the middle

Just change background-size to background-size: 51% 100%;

The complete code is as follows

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta Name ="viewport" content="width=device-width, initial-scale=1.0"> <title>Egg</title>. margin-top: 30px; width: 100px; height: 100px; background: radial-gradient(15px at 10px 50px, transparent 20px, #4169E1 20px) left, radial-gradient(15px at 40px 50px, transparent 20px, #4169E1 20px) right; background-size: 51% 100%; /* width height general and background-repeat: no-repeat; */ background-repeat: no-repeat; } </style> </head> <body> <div class="egg"> </div> </body> </html>Copy the code

Radial -gradient realization of the concave circle effect diagram