对话框图形的css实现方式

效果图：

用css实现，不会出现图片拉伸问题，同时节省资源。

原理：

外层为一个大的div，突出的小尖角为一个小div，将小div设置旋转并调整好位置，同时将小div背景色设置为同大div一个颜色。

代码：

html：

1 <div id="big">
2   <div id="small"></div>
3   hello,world.
4 </div>

css：

 1 #big{
 2   width:100px;
 3   height:100px;
 4   border:1px solid black;
 5   margin-top:50px;
 6   margin-left:50px;
 7   padding-left:10px;
 8   background:#fff;
 9 }
10 #small{
11   width:10px;
12   height:10px;
13   border-top:1px solid black;
14   border-left:1px solid black;
15   transform:rotate(45deg);
16   margin-top:-6px;
17   background:inherit;
18   margin-left:5px;
19 }

 

转载于:https://www.cnblogs.com/ihaveahammer/p/4056710.html