CSS - 绘制基本图形

• 三角形
  • 等腰三角形

.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