- 三角形
- 等腰三角形
.dengyao {
width: 0;
height: 0;
background: transparent;
border: 30px solid;
border-left-color: transparent;
border-bottom-color: brown;
border-right-color: transparent;
border-top-color: transparent;
}
- 直角三角形
.zhijiao {
width: 0;
height: 0;
background: transparent;
border: 40px solid;
border-left-color: blueviolet;
border-bottom-color: brown;
border-right-color: yellow;
border-top-color: tomato;
margin-top: 20px;
border-left: 0;
border-bottom: 0;
border-top-color: transparent;
}
- 圆形
.circle {
margin-top: 20px;
width: 50px;
height: 50px;
background-color: orange;
border-radius: 50%;
}
- 椭圆
.tuoyuan {
margin-top: 20px;
width: 50px;
height: 100px;
background-color: red;
border-radius: 50%;
}
- 取出float的效果的技巧：
在上下两个float 的div的元素中间插入 一个clear属性为both的标签(div、p)
.clearfx {
clear: both;
}
<div class="dengyao"></div>
<div class="zhijiao"></div>
<div class="tixing"></div>
<div class="circle"></div>
<div class="tuoyuan"></div>
<!-- 清除浮动 -->
<p class="clearfx"></p>
<div class="fangkuai">
-
总体效果图
效果图.png
