Use CSS3 to implement balloon style effects

This article mainly introduces the use of CSS3 write balloon style sample code, the content is very good, and now share to everyone, but also for everyone to make a reference.

This article introduces the example code that uses CSS3 to write out the balloon style, and share it with you, specifically as follows:

Balloon:

Html:

<p class= "Ballon" ></p>

Css:

. balloon{         width:160px;         height:160px;         Background: #faf9f9;          /*CSS3 Fillet Properties */          border-radius:50% 50% 25% 50%;           /* Rotate clockwise 45 degrees *           /Transform:rotate (45deg);           /* box shadow x offset y offset feather radius color *           /Box-shadow: -8px-8px 80px-8px #873940 inset;} /*after  before pseudo-element */.balloon::after{           Position:absolute;            bottom:5px;            right:5px;            Content: "";             Display:block;             /*width:18px;             height:18px;*/             /*background: #873940; *            //*transform:rotate (45DEG); * *             border:8px solid transparent;             border-right-color: #873940;             Transform:rotate (45deg);             border-radius:50%;}

The above is the whole content of this article, I hope that everyone's learning has helped, more relevant content please pay attention to topic.alibabacloud.com!