                        课程
                    
                        /前端开发
                        
                            /HTML/CSS
                        
                        /CSS深入理解之border

三角形显示

.trangle{
      border-width: 12px 20px;
      border-style: solid;
      border-color: red red transparent transparent;
}

显示效果……

Hotinly

2017-03-13

源自：CSS深入理解之border 5-1

关注问题我要回答

975

操作

收起

4 回答

行道树
2017-08-17

border-width: 12px 20px;你这个设置上下和左右的边框宽度都不一样，会出来效果才有鬼腻！

0 回复有任何疑惑可以回复我~

收起回答

壹贰叁肆伍
2017-03-13

width:0px;

0 回复有任何疑惑可以回复我~

收起回答

Hotinly 提问者

.trangle{ width: 0px; height: 0px; border: 100px solid; border-color: red red transparent transparent; } 这样写可以，上面那个不行

2017-03-13 回复有任何疑惑可以回复我~

慕容9549211 回复 Hotinly 提问者

我想问一下，这个宽高和border-width是不是有什么冲突，我的问题跟你的一样，但是没搞清楚原理

2017-12-29 回复有任何疑惑可以回复我~

壹贰叁肆伍
2017-03-13

你要三角形就把宽设为0

0 回复有任何疑惑可以回复我~

收起回答

壹贰叁肆伍
2017-03-13

要实现这个提醒，。就只能是上边border

.trangle{
      border-width: 12px 20px;
      border-style: solid;
      border-color: red transparent transparent transparent;
}

这样试试看

0 回复有任何疑惑可以回复我~

收起回答

Hotinly 提问者

还不对，这样是个梯形。

2017-03-13 回复有任何疑惑可以回复我~

0/150

提交

取消

CSS深入理解之border

参与学习 56801 人
解答问题 73 个

深入讲解border使用方法及应用，以及如何借助border完成布局

进入课程

本课相似问答

2 回答三角形不显示

2 回答border如何做倒三角，兼容性有好的

1 回答边框显示问题

3 回答怎么任意圆角那

2 回答hover与图形变色

搜索更多本课相关问答

三角形显示

我要回答关注问题

热搜

最近搜索清空

三角形显示

4 回答

本课相似问答

三角形显示