css实现三角形原理

来源：互联网发布：数据库事务特性老婆编辑：程序博客网时间：2024/06/07 04:06

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
/*div{display:inline-block;}*/
.rectangle{width:200px;height:100px;background-color:cornflowerblue;border:20px solid #C4E3F3;}
.rectangle-without-width{height:100px;width:0;background-color:cornflowerblue;border:20px solid #C4E3F3;}
.rectangle-without-width-length{width:0;height:0;background-color:cornflowerblue;border:20px solid #C4E3F3;}
.leftTop{
width:0;
height:0;
border-left:20px solid #C4E3F3;
border-top:20px solid #C4E3F3;
border-right:20px solid #C4E3F3;
}
.triangle1{
width:0;
height:0;
border-width:20px;
border-style:solid;
border-color:#C4E3F3 transparent transparent transparent;
}
.triangle2{
width:0;
height:0;
border-width:20px;
border-style:solid;
border-color:transparent #C4E3F3 transparent transparent;
}
.triangle3{
width:0;
height:0;
border-width:20px;
border-style:solid;
border-color:transparent transparent #C4E3F3 transparent;
}
.triangle4{
width:0;
height:0;
border-width:20px;
border-style:solid;
border-color:transparent transparent transparent #C4E3F3;
}
.triangle5{
width:0;
height:0;
border-width:20px;
border-left-width:10px;
border-style:solid;
border-color:transparent transparent transparent #C4E3F3;
}
.triangle6{
width:0;
height:0;
border-left:20px solid #C4E3F3;
border-top:20px solid transparent;
}
</style>
</head>
<body>
<h1>前提是将div设置为display:inline-block</h1>
<h2>长方形1</h2>
<div class="rectangle">

</div>
<h2>长方形宽度为0</h2>
<div class="rectangle-without-width">

</div>
<h2>长方形宽度高度为0</h2>
<div class="rectangle-without-width-length">

</div>
<h2>左下右</h2>
<div class="leftTop">

</div>
<h2>三角形1</h2>
<div class="triangle1">

</div>
<h2>三角形2</h2>
<div class="triangle2">

</div>
<h2>三角形3</h2>
<div class="triangle3">

</div>
<h2>三角形4</h2>
<div class="triangle4">

</div>
<h2>三角形5</h2>
<div class="triangle5">

</div>
<h2>直角三角形</h2>
<div class="triangle6">

</div>
</body>

</html>

0 0