三角形图标绘制（对话框中三角形）_怎么画对话框三角形-优快云博客

本文链接：https://blog.youkuaiyun.com/erdouzhang/article/details/71514059

本文通过HTML和CSS展示了如何创建不同类型的三角形，包括颜色、位置、形状的调整，以及应用于页面元素和图标的设计。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这里写图片描述
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;/*三角形颜色设置为白色*/
}