用css3制作一个带小尖角的气泡对话框

    感谢css3的技术发展,现在一些纯形状类的图像可以不用切成一张图片,而是可以用css3来绘制出一样的图形。

    因为这是我第一天上班主管给我的小任务,所以对它有点小感情,想要把它写在博客上。

    1、矩形对话框

    2、用三角形做小尖角

完整代码如下

<!DOCTYPE html>
<html>
<head>
	<title>test</title>
	<meta charset="utf-8">
</head>
<style type="text/css">
    .frame{
        width: 200px;
        height: 50px;
        border:1px solid #000;
        border-radius: 10px;
        position: relative;
    }
    .triangle{
        width: 20px;
        height: 20px;
        display: inline-block;
        position: absolute;
        bottom: -12px;
        right: 30px;
        background-color: #fff;
        border-top: 1px solid #000;
        border-left: 1px solid #000;
        transform:rotate(225deg);
        -ms-transform:rotate(225deg);     /* IE 9 */
        -moz-transform:rotate(225deg);    /* Firefox */
        -webkit-transform:rotate(225deg); /* Safari 和 Chrome */
        -o-transform:rotate(225deg);  /* Opera */
    }
</style>
<body>
<div class="frame">
    <span class="triangle"></span>
</div>
</body>
</html>


猜你喜欢

转载自blog.csdn.net/aerbaba/article/details/72137570