怎么用css控制border成为三角形

 我来答
四舍五不入6
高粉答主

2019-10-28 · 醉心答题,欢迎关注
知道答主
回答量:147
采纳率:100%
帮助的人:2万
展开全部

用css控制border成为三角形可以参考以下的代码:

.a {width:0;height:0;border-left:50px solid transparent;border-right:50px solid transparent;border-bottom:100px solid red;}

扩展资料:

border的css应用

如使用该复合属性定义其单个参数,则其他参数的默认值将无条件覆盖各自对应的单个属性设置。

默认值为:medium none。border-color的默认值将采用文本颜色。

提示和注释

注释:HTML 4.01 不推荐使用图像的 "border" 属性。在 XHTML 1.0 Strict DTD 和 HTML 5 中,不再支持该属性。

提示:请使用 CSS 的边框属性来改变元素的边框样式。您可以在一个外部样式表中使用 CSS 边框属性,为站点上的所有图像设置一致的边框。与单独为一个图像设置 border 属性相比,这种方式无疑拥有更高的效率。

参考资料来源:百度百科-border (英文单词)

Nervouslu
推荐于2017-10-06 · 超过14用户采纳过TA的回答
知道答主
回答量:23
采纳率:0%
帮助的人:23万
展开全部

布局div,并命名id="tri",用CSS来控制div,在style里面,使用border属性对div进行控制,

#tri{

width: 0px;

height: 0px;

   border-top: 400px solid red;

   border-right: 400px solid blue;

   border-bottom: 400px solid green;

   border-left: 400px solid yellow;

}

【注意】div的长宽设为0,border为边框,会看到如下四个三角状的图形。

上述代码画的还不是三角形,但是是四个三角,只要将border周边的颜色变成白色就可以了,例如除了border-bottom: 100px solid green;其余全变为white,就会看到如下效果,当然你也可以根据自己需要来调整。

此外可以将border-top的像素设为0;其余两边也调小一点并且颜色设为白色,就会只看到底下的一个三角形了。

【注意】根据自己实际来挑选自己想要达到的效果。图一图二效果不同,就是border设定不同的原因。

本回答被提问者采纳
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
li_Jason_ke
2015-11-12 · TA获得超过472个赞
知道小有建树答主
回答量:521
采纳率:100%
帮助的人:355万
展开全部

.a {width:0;height:0;border-left:50px solid transparent;border-right:50px solid transparent;border-bottom:100px solid red;}

已赞过 已踩过<
你对这个回答的评价是?
评论 收起
收起 更多回答(1)
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式