CSS画三角形【border-width】

最新推荐文章于 2022-04-30 00:30:00 发布

Fade Away

最新推荐文章于 2022-04-30 00:30:00 发布

阅读量557

点赞数 2

分类专栏： CSS属性 CSS 文章标签： CSS

本文链接：https://blog.csdn.net/qq_26239917/article/details/88525065

版权

CSS属性同时被 2 个专栏收录

23 篇文章 0 订阅

订阅专栏

CSS

9 篇文章 0 订阅

订阅专栏

	<style>
	.triangle_border_up{
    width:0;
    height:0;
    border-width:30px 30px 30px 30px;
    border-style:solid;
    border-color:red gold green hotpink;/*透明 透明  灰*/
    margin:40px auto;
    position:relative;
}
		</style>
	</head>
	<body>
		<div class="triangle_border_up">
    <span></span>
</div>
	</body>

前提：width-height:0

效果

在这里插入图片描述

再将不需要的设置透明即可，三角形就可以拿到了

在这里插入图片描述

优惠劵

Fade Away

关注关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
CSS画三角形【border-width】

&lt;style&gt; .triangle_border_up{ width:0; height:0; border-width:30px 30px 30px 30px; border-style:solid; border-color:red gold green hotpink;/*透明透明灰*/ margin:40px auto;...
复制链接

扫一扫