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

HTML+CSS写三角形原理

2017-05-25 09:56 295 查看

HTML+CSS写三角形原理

html:

<div class="triangle">
这是三角形
</div>

css:

.triangle{
border-top: 20px solid green;
border-left: 20px solid red;
border-bottom: 20px solid yellow;
border-right: 20px solid blue;
}

加上4边边框之后的效果：

在这基础上把中间内容区域的宽高设置为0：

.triangle{
width: 0;
height: 0;
border-top: 20px solid green;
border-left: 20px solid red;
border-bottom: 20px solid yellow;
border-right: 20px solid blue;
}

去掉宽高效果：

去掉文字：

<div class="triangle">
<!--这是三角形-->
</div>

去掉文字效果：

总结：现在就剩下4个小的三角形，想要哪一边的三角形就把其他三边的颜色设置为透明

全部代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.triangle{
width: 0;
height: 0;
border-top: 20px solid transparent; /*transparent指全透明颜色*/
border-left: 20px solid transparent;
border-bottom: 20px solid yellow;
border-right: 20px solid transparent;
}
</style>
</head>
<body>
<div class="triangle">
<!--这是三角形-->
</div>
</body>
</html>

效果：

It’s over

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

标签： css三角形原理

相关文章推荐

新的分享

章节导航