您的位置：首页 > Web前端 > HTML

html学习笔记4-border画圣诞树

2015-07-03 18:05 666 查看

先上图：

<!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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航