Use css3 to create balloon picture styles

This time I will bring you how to use css3 to make balloonspicturesstyles, and what are the notesof using css3 to make balloon picture styles. The following is a practical case. Let’s take a look. one time.

Balloon renderings:

html:

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

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

I believe you have read the case in this article After mastering the method, please pay attention to other related articles on the php Chinese website for more exciting content!

Recommended reading:

Detailed explanation of the use of pseudo elements::before and::after

Detailed explanation of the use of pointer-events in css3

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