实现空心，实心的三角形

最新推荐文章于 2022-05-09 10:47:42 发布

转载最新推荐文章于 2022-05-09 10:47:42 发布 · 301 阅读

前端技术同时被 2 个专栏收录

11 篇文章

订阅专栏

css3小技巧

2 篇文章

订阅专栏

博客展示了使用CSS实现实心三角形的代码。通过设置特定的宽度、高度、边框样式和位置属性，利用:before伪元素，结合不同方向的透明边框，实现了一个实心三角形效果。

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

/*  给矩形一个1px实心颜色rgb为#E4E4E2的边框  */
/*  给矩形一个1px实心颜色rgb为#E4E4E2的边框  */
.dynamicTime {
    width: 125px;
    height: 40px;
    border: 1px solid #E4E4E2;
    margin-left: 20px;
    position: relative;
        display: inline-block;
        vertical-align: middle;
}
/*    上下透明，右边框为10px   */
.dynamicTime:before {
    content: '';
    position: absolute;
    top: 10px;
    left: -10px;
    width: 0;
    height: 0;
    border-right: 10px solid #E4E4E2;
    border-bottom: 10px solid transparent;
    border-top: 10px solid transparent; 
}
/*  上下透明，右边框为9px且在:before伪元素三角形的基础上，向右，下移动了1px  */
.dynamicTime:after {
    content: '';
    position: absolute;
    top: 11px;
    left: -9px;
    width: 0;
    height: 0;
    border-bottom: 9px solid transparent;
    border-right: 9px solid #fff;
    border-top: 9px solid transparent; 
}

实心的三角形实现

.dynamicTime {
width: 125px;
height: 40px;
border: 1px solid #E4E4E2;
margin-left: 20px;
position: relative;
}
.dynamicTime:before {
content: '';
position: absolute;
top: 10px;
left: -10px;
width: 0;
height: 0;
border-right: 10px solid #E4E4E2;
border-bottom: 10px solid transparent;
border-top: 10px solid transparent;
}