Use css3 to achieve balloon style effect-CSS Tutorial-php.cn

Use css3 to achieve balloon style effect

不言

Release： 2018-06-20 15:03:10

Original

2593 people have browsed it

This article mainly introduces the sample code for writing balloon styles using CSS3. The content is quite good. I will share it with you now and give it as a reference.

This article introduces the sample code to write a balloon style using css3 and shares it with everyone. The details are as follows:

Balloon rendering:

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

The above is the entire content of this article. I hope it will be helpful to everyone’s study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

Use CSS3 to realize WeChat-like chat bubbles

Use CSS to realize automatic line wrapping of pure English numbers

Sharing about how to control the background with css

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