CSS 实现倒三角形

最新推荐文章于 2024-04-26 22:14:41 发布

红烧咸咸鱼

最新推荐文章于 2024-04-26 22:14:41 发布

阅读量2.5k

点赞数 2

分类专栏： CSS 文章标签： css css实现倒三角

本文链接：https://blog.csdn.net/weixin_44180579/article/details/115623181

版权

CSS 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

使用 border 绘制倒三角形

div{
	width:0px;
	height:0px;
	border-top:200px solid deeppink;
	border-bottom:200px solid transparent;
	border-left:200px solid transparent;
	border-right:200px solid transparent;
}

利用字符
一些三角形形状的字符的十进制 Unicode 表示码

◄ : &#9668; 
► : &#9658; 
▼ : &#9660; 
▲ : &#9650;
⊿ : &#8895;
△ : &#9651;

实现一个倒三角形

<div class="normal">&#9660; </div>

.normal{
	font-size:100px;
	color:skyblue;
}

使用 clip-path 绘制三角形

inset(定义矩形)
circle(定义圆)
ellipse(定义椭圆)
polygon(定义多边形)

.div{
	width:100px;
    height:87px;
    background:#c00;
	clip-path:polygon(0% 0%,50% 100%,100% 0%);
}

优惠劵

红烧咸咸鱼

关注关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
CSS 实现倒三角形

使用 border 绘制倒三角形div{ width:0px; height:0px; border-top:200px solid deeppink; border-bottom:200px solid transparent; border-left:200px solid transparent; border-right:200px solid transparent;}利用字符一些三角形形状的字符的十进制 Unicode 表示码◄ : &#9668; ►.
复制链接

扫一扫