这个就是切图的问题了。气泡切成三部分,上 中 下 重点:中间的就切一像素的长条,写css时候 写成自动高度 平铺就可以了。
郎溪网站建设公司成都创新互联,郎溪网站设计制作,有大型网站制作公司丰富经验。已为郎溪上1000家提供企业网站建设服务。企业网站搭建\成都外贸网站制作要多少钱,请找那个售后服务好的郎溪做网站的公司定做!
div class="send"
div class="arrow"/div
/div
style type="text/css"
body {
background:#4D4948;
}
.send {
position:relative;
width:150px;
height:35px;
background:#F8C301;
border-radius:5px; /* 圆角 */
margin:30px auto 0;
}
.send .arrow {
position:absolute;
top:5px;
right:-16px; /* 圆角的位置需要细心调试哦 */
width:0;
height:0;
font-size:0;
border:solid 8px;
border-color:#4D4948 #4D4948 #4D4948 #F8C301;
}
/style
1、打开开发工具,新建一个HTML文件。
2、使用font-family属性设置,字体代码:.demo1{font-family: "microsoft yahei";}。
3、使用font-size属性设置字体的大小代码:.demo1{font-size: 20px;}。
4、使用font-style 属性设置字体风格:normal - 文本正常显示italic - 文本斜体显示oblique - 文本倾斜显示。
5、使用font-weight属性设置字体的粗细代码:.demo2{font-weight: 600;}。
6、使用color设置字体颜色代码:.demo1{color: #FF0000;}。就完成了。
你可以用CSS3把上面的圆形做出来(如果不会就去百度css3 椭圆)然后下面的小尾巴用图片代替~这样你不管内容有多少你的椭圆都会变化了~
transform:skewX(30deg)
扭曲skew()函数能够让元素倾斜显示。它可以将一个对象以其中心位置围绕着X轴和Y轴按照一定的角度倾斜。这与rotate()函数的旋转不同,rotate()函数只是旋转,而不会改变
元素的形状。skew()函数不会旋转,而只会改变元素的形状。
一个参数:表示水平方向的倾斜角度;
两个参数:第一个参数表示水平方向的倾斜角度,第二个参数表示垂直方向的倾斜角度
气泡需要两个组合
IE8以上以及其他高级浏览器才支持CSS,你这兼容低版本浏览器的要求。。。