html学习笔记4-border画圣诞树
来源:互联网 发布:我的世界光影整合mac 编辑:程序博客网 时间:2024/04/28 10:19
先上图:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>用css控制border画三角形</title>
<style>
div{
width:200px;
height:200px;
background-color:auto;
}
.triangle{
width:0px;
height:0px;/*这里的数控制border中心方块的大小*/
border-top:0px solid;
border-left:100px solid;
border-bottom:100px solid;
border-right:100px solid;
border-color:transparent transparent #090 transparent;
/*transparent设置边框颜色为透明*/
}
.triangle1{
width:0px;
height:0px;/*这里的数控制border中心方块的大小*/
border-top:0px solid;
border-left:100px solid;
border-bottom:100px solid;
border-right:100px solid;
border-color:transparent transparent #090 transparent;
/*transparent设置边框颜色为透明*/
margin-top:-20px;/*距离顶部的距离*/
}
#sg{
width:50px;
height:60px;
background-color:#630;
margin:0px 80px;
}
</style>
</head>
<body>
<div>
<div class="triangle"></div>
<div class="triangle1"></div>
<div class="triangle1"></div>
<div id="sg"></div>
</div>
</body>
</html>
0 0
- html学习笔记4-border画圣诞树
- HTML&CSS学习1——画圣诞树
- HTML5学习笔记—小圣诞树
- HTML 学习笔记(四)padding、margin、border
- css学习笔记-border
- html border画三角形
- HTML&CSS--圣诞树
- HTML div CSS圣诞树~
- CSS学习笔记:border-radius
- CSS学习笔记:border-image
- css学习笔记-border-image
- html学习笔记(3)-CSS padding margin border属性详解
- html border
- css画圣诞树
- 圣诞树
- 圣诞树
- 圣诞树
- 圣诞树
- 暴力搜索内存空间获得API的线性地址
- Android中获取网络图片的三种方法
- Python中logging.config配置文件解读
- poj 1681 高斯消元
- Kids Store - OpenCart 自适应主题模板 ABC-0022
- html学习笔记4-border画圣诞树
- 232
- 网友USB枚举过程分析
- eclipse部署web项目
- 用svn管理vs项目
- VisualSVN server仓库地址变更
- postgresql安装配置
- Objective-C(十、NSRange,point,size,rect,NSNumber,NSValue,NSNull)——iOS开发基础
- GitHub上最火的40个Android开源项目