纯css制作三角形
2015-06-10 09:13
603 查看
通过控制样式来制作三角形,通常可以用在网页中下拉箭头...等地方,画个图给你们看,希望可以帮助理解。
css样式
对应结果
css样式
/*向上*/ .triangle_border_up{ width:0; height:0; border-width:0 30px 30px; border-style:solid; border-color:transparent transparent #333;/*透明 透明 灰*/ } /*向下*/ .triangle_border_down{ width:0; height:0; border-width:30px 30px 0; border-style:solid; border-color:#333 transparent transparent;/*灰 透明 透明 */ } /*向左*/ .triangle_border_left{ width:0; height:0; border-width:30px 30px 30px 0; border-style:solid; border-color:transparent #333 transparent transparent;/*透明 灰 透明 透明 */ } /*向右*/ .triangle_border_right{ width:0; height:0; border-width:30px 0 30px 30px; border-style:solid; border-color:transparent transparent transparent #333;/*透明 透明 透明 灰*/ }
对应结果
相关文章推荐
- CSS 清除浮动的写法
- CSS 常用到的一些技巧【转】
- CSS 中一些常见到的BUG及解决办法整理【转】
- css鼠标手型cursor
- 图片轮播,纯js+css
- CSS Selectors
- [R语言绘图]绘图样式设置(符号、线条、颜色、文本属性)
- CSS Properties and CSS Rules
- Using CSS in HTML
- css3处理sprite背景图压缩来解决H5网页在手机浏览器下图标模糊的问题
- Qt 自定义 滚动条 样式
- 关于Css选择器优先级
- CSS3选择器
- iOS之设置导航控制器样式以及AttributeText, NSMutableAttributedString
- AUTOCAD ActiveX 设置默认点样式
- label、span标签小解
- CSS 清除浮动的几种方式
- CSS里的单位
- CSS定位阴影
- CSS多种方法实现分隔线