css3 code to implement balloon style-CSS Tutorial-php.cn

css3 code to implement balloon style

小云云

Release： 2017-12-23 13:29:17

Original

1984 people have browsed it

This article mainly introduces the sample code for writing balloon styles using CSS3. The editor thinks it is quite good, so I will share it with you now and give it as a reference. Let’s follow the editor to take a look, I hope it can help everyone.

Balloon renderings:

##html:

<p class="ballon"></p>

Copy after login

css:

.balloon{

         width: 160px;

         height: 160px;

         background: #faf9f9;

          /*css3 圆角属性*/

          border-radius: 50% 50% 25% 50%;

           /*顺时针旋转45度*/

           transform: rotate(45deg);

           /*盒子阴影 x位移 y位移 羽化 半径 颜色 */

           box-shadow: -8px -8px 80px -8px #873940 inset;

}

/*after  before 伪元素*/

.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%;

}

Copy after login

Related recommendations:

Create various graphic shapes using only CSS

Detailed explanation of css Codes for implementing various shapes

Css3 new features application shapes

The above is the detailed content of css3 code to implement balloon style. For more information, please follow other related articles on the PHP Chinese website!