Introduction to the method of writing a balloon with CSS3

This article mainly introduces the use of CSS3 to write balloon style sample code, small series feel very good, now share to everyone, but also for everyone to do a reference. Let's take a look at it with a little knitting.

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 Soli             D Transparent;             Border-right-color: #873940;             Transform:rotate (45DEG); border-radius:50%;}