<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style>
.body{
height: 100px;
100px;
background-color:blue;
/*相对位置*/
position: relative;
/*无用代码*/
margin: 100px 100px;
}
/**/
.triangle1{
0;
height: 0;
border: 10px solid red;
border-top: none;
border-right-color: transparent;
border-left-color: transparent;
/*绝对位置*/
position: absolute;
/*将小三角形向下移90个像素*/
top: 90px;
/*将小三角形向右移10个像素*/
left: 10px;
}
.triangle2{
0;
height: 0;
border: 10px solid red;
border-left-color: transparent;
border-bottom-color: transparent;
border-top-color: transparent;
position: absolute;
top: 30px;
left: -20px;
}
.triangle3{
0;
height: 0;
border: 30px solid red;
border-top: none;
border-left-color: transparent;
border-bottom-color: transparent;
border-top-color: transparent;
position: absolute;
top: 0px;
left: 40px;
}
.triangle4{
0;
height: 0;
border: 10px solid red;
}
.triangle5{
0;
height: 0;
border: 10px solid red;
border-left-color: transparent;
border-top-color: transparent;
position: absolute;
bottom: 0px;
right: 0px;
}
.triangle6{
0;
height: 0;
border: 10px solid red;
border-left-color: transparent;
border-right-color: transparent;
border-top: none;
position: absolute;
left: 36px;
bottom: 100px;
}
.triangle7{
0;
height: 0;
border: 10px solid red;
border-bottom-color: transparent;
border-top-color: transparent;
border-right-color: transparent;
position: absolute;
top: 30px;
left: 100px;
}
</style>
<body>
<div class="body">
<div class="triangle1">
</div>
<div class="triangle2">
</div>
<div class="triangle3">
</div>
<div class="triangle4">
</div>
<div class="triangle5">
</div>
<div class="triangle6">
</div>
<div class="triangle7">
</div>
</div>
</body>
</html>