利用纯css实现基本图形

利用纯css实现基本的三角形以及对话框

---

等边三角形

效果展示如下

实现代码如下

.regular-triangle {
    width:0;
    height:0;
    border-bottom: 20px solid #000;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
}

直角三角形

效果展示如下

实现代码如下

.regular-triangle {
    width:0;
    height:0;
    border-bottom: 20px solid #000;
    border-right: 20px solid transparent;
}

对话框

效果展示如下

实现代码如下

  .dialog {
    width:100px;
    height:75px;
    border-radius:5px;
    position:relative;
        }

  .dialog:before {
    content: "";
    position: absolute;
    left: 100%;
    width: 0;
    height: 0;
    top: 20px;
    border-left: 15px solid #333;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
        }