感谢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>