用css画菱形
代码:
<html>
<body>
<style>
.div1{
width: 0;
height: 0;
border-top: 40px solid transparent;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
border-bottom: 40px solid #bbbbbb;
}
.div2{
width: 0;
height: 0;
border-bottom: 40px solid transparent;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
border-top: 40px solid #bbbbbb;
}
</style>
<div class="div1"></div>
<div class="div2"></div>
</body>
</html>
用css画四种三角形:
代码:
<html>
<body>
<style>
.div1{
width: 0;
height: 0;
border-top: 40px solid transparent;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
border-bottom: 40px solid #bbbbbb;
}
.div2{
width: 0;
height: 0;
border-bottom: 40px solid transparent;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
border-top: 40px solid red;
}
.div3{
width: 0;
height: 0;
border-bottom: 40px solid transparent;
border-top: 40px solid transparent;
border-right: 40px solid transparent;
border-left: 40px solid black;
}
.div4{
width: 0;
height: 0;
border-bottom: 40px solid transparent;
border-left: 40px solid transparent;
border-top: 40px solid transparent;
border-right: 40px solid burlywood;
}
</style>
<div class="div1"></div>
<div style="margin: 40px;"></div>
<div class="div2"></div>
<div style="margin: 40px;"></div>
<div class="div3"></div>
<div style="margin: 40px;"></div>
<div class="div4"></div>
</body>
</html>
效果图:
用css画实心圆空心圆:
代码:
<html>
<body>
<style>
.circle{
width: 100px;
height: 100px;
background-color: #a72525;
border-radius: 100px;
}
.circle1{
width: 100px;
height: 100px;
background-color: #ffffff;
border: 3px solid #a72525;
border-radius: 100px;
}
</style>
<div class="circle"></div>
<div style="margin-top: 40px;"></div>
<div class="circle1"></div>
<div style="margin-top: 40px;"></div>
<div class="circle1"></div>
</body>
</html>
效果图:
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。