三角形图标绘制（对话框中三角形）

html:

<article>        <h1>Html</h1>        <p>At W3Schools...more.</p>    </article>

css：

body {    background-color: #d4676a;    margin: 50px;}article {    width: 400px;    padding: 20px 40px;    background-color: #fff;    border-radius: 4px;    box-shadow: 5px 7px 1px rgba(0,0,0,.1);    position: relative;/*三角形定位，子绝父相*/}article h1 {    color: #d4676a;}article p {    color: #666;}/*绘制三角形*/article::after {    content: '';        width: 0;    height: 0;    border-width: 20px;    border-style: solid;    border-color: #390 #f30 #36f #ff3;/*颜色分别为绿色，红色，蓝色，黄色*/    position: absolute;    bottom: -40px;/*三角形的边框宽20px,上下边框之和是40px,所以值为-40px*/}

下面开始制作三角形，如下图：

上图css代码如下：

article::after {    其他代码省略...    border-color: #390 transparent transparent;}

继续调整三角形，变成白色：

css代码如下：

article::after {    其他代码省略...    border-color: #fff transparent transparent;/*白色三角形*/}

把三角形放在左边：

css代码如下：

article::after {    其他代码省略...    left: -40px;    top: 35px;    border-color: transparent #fff transparent transparent;/*白色三角形*/}

可以调节三角形的边框来使三角形更尖锐、扁平:

css代码如下：

article::after {    其他代码省略...    border-width: 15px 20px;/*使三角形更尖锐*/    border-color: transparent #fff transparent transparent;/*白色三角形*/}

把三角形放在右边：

css代码如下：

article::after {    其他代码省略...    right: -40px;    top: 35px;    border-color: transparent transparent transparent #fff ;/*白色三角形*/}

可以做成缺口效果：

css代码如下：

article::after {    其他代码省略...    top: 35px;    left: 0;    border-width: 15px;    border-color: transparent transparent transparent #d4676a;/*三角形颜色设为背景颜色*/}

用作页面中的元素点缀：

css代码如下：

article::after {    其他代码省略...    top: 35px;    right: 20px;    border-width: 10px;    border-color: transparent transparent transparent #d4676a;/*三角形颜色设为背景颜色*/}

并排三角形效果：

css代码如下：

article::before {    其余代码相同...    right: 30px;                border-width: 10px;             border-color: transparent transparent transparent #d4676a ;}article::after {    其他代码省略...       right: 20px;    border-width: 10px;    border-color: transparent transparent transparent #d4676a;/*三角形颜色设为背景颜色*/}

图标效果：

css代码如下：

article::before {    其他代码相同...    right: 30px;                border-width: 10px;             border-color: transparent transparent transparent #d4676a ;/*三角形颜色设为背景颜色*/}article::after {    其他代码省略...       right: 25px;    border-width: 10px;    border-color: transparent transparent transparent #fff;/*三角形颜色设置为白色*/}