关于css3制作三角形问题代码
2016-07-13 10:43
381 查看
1.制作头部朝上的三角形
![](https://oscdn.geek-share.com/Uploads/Images/Content/201607/13/eccdf00db4a10f99fc7d1a626a6e6917)
代码:
#triangle-up {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
}
2.制作头部朝下的三角形
![](https://oscdn.geek-share.com/Uploads/Images/Content/201607/13/195ea13eaacbae89bc98a0c550e4941b)
代码:
#triangle-up {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
}
3.制作头部朝左的三角形
![](https://oscdn.geek-share.com/Uploads/Images/Content/201607/13/5602a0ba51d4b5fc9423a7824640cd1b)
代码:
#triangle-left {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-right: 100px solid red;
border-bottom: 50px solid transparent;
}
4.制作头部朝右的三角形
![](https://oscdn.geek-share.com/Uploads/Images/Content/201607/13/299af6284a55030b9c909de2a60d5ecf)
代码:
#triangle-right {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-left: 100px solid red;
border-bottom: 50px solid transparent;
}
5.制作头部朝左上角的三角形
![](https://oscdn.geek-share.com/Uploads/Images/Content/201607/13/f76c28e22975dd07801c0f58dbbedb56)
代码:
#triangle-topleft {
width: 0;
height: 0;
border-top: 100px solid red;
border-right: 100px solid transparent;
}
6.制作头部朝右上角的三角形
![](https://oscdn.geek-share.com/Uploads/Images/Content/201607/13/41bff09c127fd357e99bb7f320410d8a)
代码:
#triangle-topright {
width: 0;
height: 0;
border-top: 100px solid red;
border-left: 100px solid transparent;
}
7.头部朝左下角的三角形
![](https://oscdn.geek-share.com/Uploads/Images/Content/201607/13/801c90212e381098ec0b0ba14e380873)
代码:
#triangle-bottomleft {
width: 0;
height: 0;
border-bottom: 100px solid red;
border-right: 100px solid transparent;
}
8.头部朝右下角的三角形
代码:
![](https://oscdn.geek-share.com/Uploads/Images/Content/201607/13/56dc60f9c065bbed11486d784fdedd2b)
代码:
#triangle-bottomright {
width: 0;
height: 0;
border-bottom: 100px solid red;
border-left: 100px solid transparent;
}
代码:
#triangle-up {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
}
2.制作头部朝下的三角形
代码:
#triangle-up {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
}
3.制作头部朝左的三角形
代码:
#triangle-left {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-right: 100px solid red;
border-bottom: 50px solid transparent;
}
4.制作头部朝右的三角形
代码:
#triangle-right {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-left: 100px solid red;
border-bottom: 50px solid transparent;
}
5.制作头部朝左上角的三角形
代码:
#triangle-topleft {
width: 0;
height: 0;
border-top: 100px solid red;
border-right: 100px solid transparent;
}
6.制作头部朝右上角的三角形
代码:
#triangle-topright {
width: 0;
height: 0;
border-top: 100px solid red;
border-left: 100px solid transparent;
}
7.头部朝左下角的三角形
代码:
#triangle-bottomleft {
width: 0;
height: 0;
border-bottom: 100px solid red;
border-right: 100px solid transparent;
}
8.头部朝右下角的三角形
代码:
代码:
#triangle-bottomright {
width: 0;
height: 0;
border-bottom: 100px solid red;
border-left: 100px solid transparent;
}
相关文章推荐
- CSS3属性教程与案例分享
- CSS3属性教程与案例分享
- CSS3的calc()使用
- 使用CSS3的appearance属性改变元素的外观
- CSS3美化图片
- CSS3质感分析——表面线性渐变
- 分析选项卡底部内凹圆角制作
- 细说百度图片栏目——图片展示效果
- 8个实用的响应式设计框架
- 20+ Animation Scripts, Libraries and Plugins
- 新时代编辑神器:Atom
- 如何使用CSS3画出一个叮当猫
- 基于Jquery和CSS3制作数字时钟附源码下载(CSS3篇)
- jQuery CSS3相结合实现时钟插件
- CSS3实现动态翻牌效果 仿百度贴吧3D翻牌一次动画特效
- CSS3实例分享之多重背景的实现(Multiple backgrounds)
- 低版本IE正常运行HTML5+CSS3网站的3种解决方案
- CSS3中Transition属性详解以及示例分享
- 基于jQuery和CSS3制作响应式水平时间轴附源码下载
- jquery+CSS3模拟Path2.0动画菜单效果代码