Recently there was a need to implement chat bubbles with a special small arrow and transparent activity portals with inner arcs;

The effect is as follows:

I’m sure some people would say it’s not so easy to cut it out with pictures.

But have you ever thought, how to achieve without pictures, go to the Internet search;

Sure enough, there are some results, but if I go in there and look at it most of them are div over div and color over div, but it’s not what I want;

At the beginning, it was really a little confused, but after thinking about it carefully, it was still so easy!

Key points of requirement:

To transparent, but also to circular shape, carefully observe the gray translucent bubble bottom left corner is a sharp arc; The other is that the disc is an inner circle with the yellow block on the right and the inner circle is transparent, like a crescent spatula.

Let’s cut the suspense and get straight to my own plan!

Principle:

To make it easier to see the outline I set the background blue;

1, we first implement a sector, through the CSS border to achieve a sector arc, see figure 1 red block;

2. Secondly, add a container div outside the sector to define the width and height, set overflow:hidden, do not set the background, and achieve the cutting of the red arc through relative positioning;

3. The hidden red block is rotated 180 degrees to follow the design in the lower left corner of the demand bubble, which perfectly matches Figure 2;

Look at the second design required, the inner arc transparent;

The width defined by the parent container is the same as the width of the inner circle of the sector, and the property overflow:hidden is set. By relative positioning, the left and right sides of the above are cut. The effect is shown in Figure 3.

As explained in principle above, two key requirements have been solved and the rest is not said!

The basic code is attached behind to debug the width, height and rotation Angle of test-out DOM, debug the left, top and rotation of test DOM, find the cutting position, and realize Figure 2 and Figure 3.

FIG. 1

Figure 2

FIG. 3

Code section

/ / HTML
<div class='test-out'>
    <div class='test'></div>
</div>

/ / CSS
.test-out {
    width: 34px;
    height: 40px;
    position: relative;
    overflow: hidden; // The parent container hides and cuts off unwanted parts
    transform: rotate(0deg);  // Rotate it to the desired Angle. The default value is 0
}
.test {
    position: absolute;
    left: -10px;
    top: 0;
    width: 100px;
    height: 100px;
    border-width: 50px; // Implement the sector through the border
    border-style: solid;
    border-color: #f00 transparent transparent transparent;
    border-radius:100px;
    transform: rotate(0deg);  // Rotate it to make the desired shape. The default value is 0
}
Copy the code