CSS绘制三角形
2016-06-20 18:25
453 查看
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <style type="text/css"> #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; } </style> </head> <body> <div style="position: absolute;left: 0px;" id="triangle-up"></div> <div style="position: absolute;left: 200px;" id="triangle-down"></div> <div style="position: absolute;left: 400px;" id="triangle-left"></div> <div style="position: absolute;left: 600px;" id="triangle-right"></div> <div style="position: absolute;top:150px;left: 0px;" id="triangle-topleft"></div> <div style="position: absolute;top:150px;left: 200px;" id="triangle-topright"></div> <div style="position: absolute;top:150px;left: 400px;" id="triangle-bottomleft"></div> <div style="position: absolute;top:150px;left: 600px;" id="triangle-bottomright"></div> </body> </html>
相关文章推荐
- discuz x2 diy 模块的样式点击不管用,模块的数据、标题都可以编辑
- css-元素水平、竖直居中
- css选择器
- CSS——布局模型
- SpannableString 为文本中的个别文字添加样式
- 3-4改变 HTML 样式
- css样式大全
- CSS(3) 边框
- CSS——盒模型
- CSS 下拉菜单
- 【CSS3】文字与字体--慕课网【学习总结】
- WebKit的CSS扩展(WebKit是私有属性)
- WPF c#后台代码控制样式显示
- css3动画库
- css3中-webkit-text-size-adjust详解
- JS+CSS简单实现DIV遮罩层显示隐藏
- CSS——文字排版
- CSS隐藏元素的五种方法
- checkbox的样式优化
- WPF 美化界面,样式的使用(资源)1