css镂空三角形样式

前言

对话框----镂空三角形样式

原理

1)利用伪元素 :before :after

2):before ,border做出大三角形样式

3):after,border做出小三角形样式

4)小三角形的白色样式遮住大三角形样式,形成镂空

镂空三角形

html

<div id="talkTop">顶部镂空三角形
</div>
<div id="talkBottom">底部镂空三角形
</div>
<div id="talkLeft">左边镂空三角形
</div>
<div id="talkRight">右边镂空三角形
</div>

css样式

#talkTop,
#talkBottom,
#talkLeft,
#talkRight{width:120px;height:40px;margin:60px;line-height:40px;text-aligin:center;position:relative;-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;border-radius:1px solid #808080;background-color:#fff;
}/*talkBottom*/
#talkBottom:before{content:" ";position:absolute;top:100%;left:50px;width:0;height:0;border-left:15px solid transparent;border-top:15px solid #808080;border-right:15px solid transparent;
}
#talkBottom:after{content:" ";position:absolute;top:100%;left:51px;width:0;height:0;border-left:14px solid transparent;border-top:14px solid #fff;border-right:14px solid transparent;
}
#talkBottom:hover{color:#fff;background-color:#ff0000;
}
#talkBottom:hover:after{width:0;height:0;border-left:14px solid transparent;border-top:14px solid #ff0000;border-right:14px solid transparent;
}/*talkTop*/
#talkTop:before{content:" ";position:absolute;top:-15px;left:50px;width:0;height:0;border-left:15px solid transparent;border-bottom:15px solid #808080;border-right:15px solid transparent;
}
#talkTop:after{content:" ";position:absolute;top:-14px;left:51px;width:0;height:0;border-left:14px solid transparent;border-bottom:14px solid #fff;border-right:14px solid transparent;
}
#talkTop:hover{color:#fff;background-color:#ff0000;
}
#talkTop:hover:after{width:0;height:0;border-left:14px solid transparent;border-bottom:14px solid #ff0000;border-right:14px solid transparent;
}/*talkLeft*/
#talkLeft:before{content:" ";position:absolute;top:15px;left:-7px;width:0;height:0;border-top:7px solid transparent;border-right:7px solid #808080;border-bottom:7px solid transparent;
}
#talkLeft:after{content:" ";position:absolute;top:16px;left:-6px;width:0;height:0;border-top:6px solid transparent;border-right:6px solid #fff;border-bottom:6px solid transparent;
}
#talkLeft:hover{color:#fff;background-color:#ff0000;
}
#talkLeft:hover:after{width:0;height:0;border-left:6px solid transparent;border-right:6px solid #ff0000;border-bottom:6px solid transparent;
}/*talkRight*/
#talkRight:before{content:" ";position:absolute;top:15px;right:-7px;width:0;height:0;border-top:7px solid transparent;border-left:7px solid #808080;border-bottom:7px solid transparent;
}
#talkRight:after{content:" ";position:absolute;top:16px;right:-6px;width:0;height:0;border-top:6px solid transparent;border-left:6px solid #fff;border-bottom:6px solid transparent;
}
#talkRight:hover{color:#fff;background-color:#ff0000;
}
#talkRight:hover:after{width:0;height:0;border-left:6px solid transparent;border-left:6px solid #ff0000;border-bottom:6px solid transparent;
}

css镂空三角形样式

css镂空三角形样式相关推荐

HTML之CSS画三角形原理,纯CSS写三角形样式集合（原理解析）
一.实现原理在css3中,我们主要使用的是一个transparent的属性,意思是透明的,比如我们将字体设置为黑色会写color:black,那么如果想把字体的颜色设置为透明,我们可以写color: ...
html css右下角三角形,纯CSS绘制三角形（各种角度）
CSS/HTML 的纯CSS绘制三角形(各种角度) 我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 C ...
CSS/CSS3常用样式与web移动端资源
CSS/CSS3常用样式与知识点 IE条件注释条件注释简介 IE中的条件注释(Conditional comments)对IE的版本和IE非IE有优秀的区分能力,是WEB设计中常用的hack方法. ...
html div三角形,【div】纯CSS绘制三角形
原标题:[div]纯CSS绘制三角形我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使 ...
css空心三角形_（12）把“可以动的盒子”更优雅地展示： “伪元素”妙用 | CSS...
原创:itsOli @前端一万小时本文版权归作者所有,未经授权,请勿转载! 本文节选自"语雀"私有付费专栏「前端一万小时 | 从零基础到轻松就业」 1. 如何使用伪元素来清除浮动 ...
制作京东快递查询 css制作三角形
这是我学习前端道路上制作的一个小案例,想把这些记下来,记录我的学习经历和更加熟练的掌握代码..这个案例是当我们在下面输入数字时上面的盒子会放大的显示出来,效仿的是京东快递查询单号.好了,废物不多说,上 ...
[总结]CSS/CSS3常用样式与web移动端资源
CSS/CSS3常用样式与知识点 IE条件注释条件注释简介 IE中的条件注释(Conditional comments)对IE的版本和IE非IE有优秀的区分能力,是WEB设计中常用的hack方法. ...
css空心三角形_纯CSS制作空心三角形和实心三角形及其实现原理
纯CSS制作空心三角形和实心三角形及其实现原理在一次项目中需要使用到空心三角形,我瞬间懵逼了.查阅了一些资料加上自己的分析思考,终于是达到了效果,个人感觉制作三角形是使用频率很高的,因此记录下来,供 ...
CSS绘制三角形图标
CSS绘制三角形图标目录 1CSS绘制三解形图标原理 2 页面效果 3 HTML结构 4 CSS样式 1CSS绘制三解形图标原理对内容容器进行相对定位,对内容容器的伪元素:before和:after ...

css镂空三角形样式

前言

原理

镂空三角形

css镂空三角形样式相关推荐

最新文章

热门文章