css制作三角形
2015-10-10 16:07
519 查看
#triangle-up {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
}
#triangle-down {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid red;
}
#triangle-left {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-right: 100px solid red;
border-bottom: 50px solid transparent;
}
#triangle-right {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-left: 100px solid red;
border-bottom: 50px solid transparent;
}
#triangle-topleft {
width: 0;
height: 0;
border-top: 100px solid red;
border-right: 100px solid transparent;
}
#triangle-topright {
width: 0;
height: 0;
border-top: 100px solid red;
border-left: 100px solid transparent;
}
#triangle-bottomleft {
width: 0;
height: 0;
border-bottom: 100px solid red;
border-right: 100px solid transparent;
}
#triangle-bottomright {
width: 0;
height: 0;
border-bottom: 100px solid red;
border-left: 100px solid transparent;
}
相关文章推荐
- CSS实现背景透明,文字不透明,兼容所有浏览器
- 最全的CSS浏览器兼容问题
- 漂亮的CSS3圆角按钮组合DEMO演示
- 纯css实现高尔夫小球动画案例分析
- css中float浮动原理及使用方法
- 巧用css美化select下拉列表 更换下拉箭头
- 高效CSS开发核心要点摘录
- 根据select选项的值,改变css
- css设置最小高度 然后自适应
- 解读浮动闭合最佳方案:clearfix
- css常用代码大全以及css兼容(转载)
- html引用外部css文件(使用绝对路径)
- 详解CSS中:nth-child的用法
- css 各种高度和宽度
- QT 自定义Qcombobox样式,下拉项同时包括图片和文字
- 如何处理CSS3属性前缀(转载)总结
- ul ol 列表的样式的控制
- 请问两个div之间的上下距离怎么设置
- web前端开发的点点滴滴---4.CSS选择器
- web前端开发的点点滴滴---3.CSS介绍