使用css3实现消息框

原理:使用css3中的transform:rotate旋转,通过定位改变位置。

.out{
            width: 300px;
            height: 150px;
            background-color: pink;
            margin:200px;
            position: relative;
        }

        .out::before{
            content:"";
            position: absolute;
            width: 50px;
            height: 50px;
            background-color: pink;
            transform:rotate(45deg);
            left:40%;
            top:-15px;

        }
         <div class="out">
         div>

效果图:
使用css3实现消息框_第1张图片

根据自己的需求改变left top bottom right的值可以实现小三角的位置。

你可能感兴趣的:(使用css3实现消息框)