用CSS画三角形
2012-05-08 11:06
183 查看
今天在网上看到一个非常好玩的写法，教人怎样用css话三角形。内容其实很简单，难的是能想出来，并且巧妙地利用好。
我用这种写法画了一个图：
css是这样写的：
利用这种写法，你可以做出这样的效果出来：
具体css如下：
我用这种写法画了一个图：
css是这样写的：
<style tyepe="text/css">
.box{
width:0px;
height:0px;
border-bottom:50px solid red;
border-left:50px solid black;
border-top:50px solid green;
border-right:50px solid blue;
}
</style>利用这种写法，你可以做出这样的效果出来：
具体css如下：
<html>
<head>
<style tyepe="text/css">
.box{
width:300px;
height:100px;
background-color:gray;
border:1px solid gray;
}
.triangle{
top:100px;
margin-left:15px;
width:0px;
height:0px;
border-bottom:10px solid white;
border-left:10px solid white;
border-top:10px solid gray;
border-right:10px solid white;
}
</style>
</head>
<body>
<div class="box"></div>
<div class="triangle"/>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 