利用纯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;        }