利用css3写出的倒三角形

      发布在:前端技术      评论:0 条评论

<!DOCTYPE html>

<html>

<head>

<meta charset="gb2312" />

<title>无标题文档</title>

<style>

.triangle-left {

width:0;

height:0;

border-right:20px solid #333;

border-top:20px solid transparent;

border-bottom:20px solid transparent;

}


.triangle-up {

width:0;

height:0;

border-bottom:20px solid #333;

border-left:20px solid transparent;

border-right:20px solid transparent;

}

.triangle-right {

width:0;

height:0;

border-left:20px solid #333;

border-top:20px solid transparent;

border-bottom:20px solid transparent;

}

.triangle-down {

width:0;

height:0;

border-top:20px solid #333;

border-left:20px solid transparent;

border-right:20px solid transparent;

}

</style>

</head>


<body>

<div class="triangle-left"></div>

<div class="triangle-up"></div>

<div class="triangle-right"></div>

<div class="triangle-down"></div>

</body>

</html>


相关文章
热门推荐