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;
    }

  • 总体效果图


    CSS - 绘制基本图形_第1张图片
    效果图.png

你可能感兴趣的:(CSS - 绘制基本图形)