html
<div class="mod-msg-bubble" id="mod-msg-bubble">
<div class="bubble-icon-container">
<div class="bubble-icon" style=""></div>
</div>
</div>
css
.mod-msg-bubble {
position: absolute;
overflow: hidden;
top: 431px;
width: 368px;
height: 128px;
border:1px solid #99bbe8;
}
.bottom{
border-top: 8px solid white;
border-left: 8px dashed transparent;
border-right: 8px dashed transparent;
position: absolute;
}
.top{
border-bottom: 8px solid white;
border-left: 8px dashed transparent;
border-right: 8px dashed transparent;
position: absolute;
}
.left{
border-right:8px solid white;
border-top: 8px dashed transparent;
border-bottom: 8px dashed transparent;
position: absolute;
}
.right{
border-left:8px solid white;
border-top: 8px dashed transparent;
border-bottom: 8px dashed transparent;
position: absolute;
}
.mod-msg-bubble .bubble-icon-container .left {
border-bottom: 8px solid white;
border-left: 8px dashed transparent;
border-right: 8px dashed transparent;
position: absolute;
top:20px;
left:10px;
}
分享到:
相关推荐
css三角形、居中、圣杯布局
通过css代码去实现三角形,用在网页开发中,演示通过css去实现菜色的矩形、上三角形、下三角形、右三角形、左三角形。
用纯css绘制三角形,不是用图片
还在为网页太多图片加载太慢而发愁吗?纯CSS打造三角形,不需要用图片了!
css--实现透明三角形(来自百度web前端工程师试题)
css 三角形样式,样式表,css样式,三角形样式,css三角
复制代码代码如下: <style> .b{ position: absolute; z-index: 2; width: 0; height: 0; line-height: 0; font-size: 0; border-width: 5px;... /*如果倒三角形前面的字多于两个,就设置这里的像素值大些*/
css border三角形
css3三角形布局transform旋转列表图片三角形布局代码 css3三角形布局transform旋转列表图片三角形布局代码
纯CSS写带边框的三角形
NULL 博文链接:https://kingkit.iteye.com/blog/692203
Css画三角形border 加粗。
纯CSS实现多彩三角形有序变化特效动画时尚背景墙。
个性css3三角形设计师案例bootstrap模板_个性 灰色 三角形 css3 css3动画 设计 设计师 案例 展示 企业 个性css3三角形设计师案例bootstrap模板_个性 灰色 三角形 css3 css3动画 设计 设计师 案例 展示 企业
CSS绘制三角形
用CSS制作三角形,三角形可以用于制作折角效果、阴影效果
08.code css实现三角形.zip