[CSS] 纯CSS绘制三角形

利用border属性，可以绘制三角形。
将border-bottom设置为npx solid gray，其他border设置为透明。

div.test {
    border-color: transparent;
    border-width: 0 8px 8px;
    border-bottom-color: gray;
    border-style: solid;
    display: inline-block;
}

其中
border-width: 0 8px 8px;三个值分别表示：（上），（左右），（下）

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • 各种纯css图标
    各种纯css图标 CSS3可以实现很多漂亮的图形，我收集了32种图形，在下面列出。直接用CSS3画出这些图形，要比...
    剑残阅读 9,715评论 0赞 8
  • 实用的60个CSS代码片段
    1、垂直对齐 如果你用CSS，则你会有困惑：我该怎么垂直对齐容器中的元素？现在，利用CSS3的Transform，...
    kiddings阅读 3,208评论 0赞 11
  • 关于CSS
    学习CSS的最佳网站没有之一 http://www.w3school.com.cn/tags/index.asp ...
    Amyyy_阅读 1,101评论 0赞 1
  • CSS可以绘制哪些常见的特殊形状？
    大家好，我是IT修真院北京分院25期的学员，一枚正直纯洁善良的web前端程序员 今天给大家分享一下，修真院官网cs...
    be684ac78b0c阅读 1,278评论 0赞 1
  • 二十五岁的生日
    十二月的杭城开始冷了，晚上下班一走出公司大楼，冷风就嗖嗖地钻进脖子里，我赶紧将棉袄的拉链拉到顶，将半个脸埋在围巾里...
    思语者2016阅读 678评论 0赞 1