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

使用css边框属性画三角性

2013-05-05 19:38 127 查看

css边框并不是一个矩形。看下面的代码：

<html>
<head>
<style type="text/css">
.test{
width:20;
height:20;
border-bottom:20px solid red;
border-right:20px solid blue;
border-left:20px solid green;
border-top:20px solid black;
}
</style>

</head>
<body>
<div class="test">
</div>
<body>
</html>

截图如下：

看到没有，边框是一个个矩形。但是如果我们让这个div的长度和宽度都变成0，那么结果是如何呢？看下面的截图：

所以如果我们让其他三个边的颜色跟背景色一样，一个边框跟背景色不同，那么三角形不就出来了吗？代码如下：

<html>
<head>
<style type="text/css">
.test{
width:0;
height:0;
border-bottom:20px solid white;
border-right:20px solid white;
border-left:20px solid white;
border-top:20px solid black;
}
</style>

</head>
<body>
<div class="test">
</div>
<body>
</html>

效果如下：

那么如何画出普通的三角形呢？修改下border-width就行啦。代码如下

<html>
<head>
<style type="text/css">
.test{
width:0;
height:0;
border-bottom:20px solid white;
border-right:20px solid black;
border-top:30px solid white;
}
</style>

</head>
<body>
<div class="test">
</div>
<body>
</html>

效果如下：

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

标签： css 三角形 border

相关文章推荐

新的分享

章节导航