Haha, I looked at it and found it very interesting. I roughly understand what the original poster meant, that is, the line should be inward rather than outward.
First of all, I thought the border-radius property could be implemented, why do I think so? Because I think border-radius should be able to have negative values. A positive value means drawing a circle outward, and a negative value means drawing a circle inward.
I am still too naive, border-radius does not support negative values.
After the idea failed, another idea came to my mind, which is to implement it through covering. I just tried it and it seems feasible. Here is the code:
To briefly explain the idea, first construct a right-facing triangle. Students who don’t know how to construct can refer to this article about borders in CSS. Then draw a pseudo-class after to implement a circle. The background color is the same as the background color. By setting the position to cover the lower edge of the triangle below, the final effect is achieved.
In order to be more intuitive, I changed the background color of after,
In fact, there are big disadvantages in doing this, such as the actual width of the element will become larger, etc.
But I think the original poster’s request has been fulfilled. OooO, although it is a bit different from the original poster’s style.
Irregular bubble pictures generally do not need to be drawn with code. They are generally implemented with image masks, canvas or dom. /////////////////////////////////// -webkit-mask-image can be easily implemented The effect you want http://output.jsbin.com/jeruxul
The tip of the bubble is an independent p. Change the unnecessary border color to the background color, and then use positioning to move it to the desired place
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Haha, I looked at it and found it very interesting. I roughly understand what the original poster meant, that is, the line should be inward rather than outward.
First of all, I thought the border-radius property could be implemented, why do I think so? Because I think border-radius should be able to have negative values. A positive value means drawing a circle outward, and a negative value means drawing a circle inward.
I am still too naive, border-radius does not support negative values.
After the idea failed, another idea came to my mind, which is to implement it through covering. I just tried it and it seems feasible. Here is the code:
To briefly explain the idea, first construct a right-facing triangle. Students who don’t know how to construct can refer to this article about borders in CSS. Then draw a pseudo-class after to implement a circle. The background color is the same as the background color. By setting the position to cover the lower edge of the triangle below, the final effect is achieved.
In order to be more intuitive, I changed the background color of after,
In fact, there are big disadvantages in doing this, such as the actual width of the element will become larger, etc.
But I think the original poster’s request has been fulfilled. OooO, although it is a bit different from the original poster’s style.
Irregular bubble pictures generally do not need to be drawn with code. They are generally implemented with image masks, canvas or dom.
///////////////////////////////////
-webkit-mask-image can be easily implemented The effect you want
http://output.jsbin.com/jeruxul
The tip of the bubble is an independent p. Change the unnecessary border color to the background color, and then use positioning to move it to the desired place