CSS做形状

shapes of css

原理：借助 边框、阴影、圆角来实现不同形状，使用绝对定位来设置位置，使用伪元素来替代标签

范例

实现Tooltip

<div class="tooltip">
  大家好，这里是饥人谷
</div>
<style>
  .tooltip {
    position: relative;
    display: inline-block;
    padding: 3px 5px;
    margin-left: 20px;
    background: #000;
    color: #fff;
    font-size: 14px;
    line-height: 1.5;
    border-radius: 3px;
  }

</style>

实现一个仪表盘

预览地址

涉及知识点

1. CSS3阴影用法
2. CSS3圆角
3. CSS3背景渐变
4. CSS3transform