CSS中左上朝向三角形(Top-Left Triangle)的几种制作方式

今天我们介绍几种，用css实现左上朝向三角形（Top-Left Triangle）的写法。

示意图（以宽高各60px为例）：

这种三角形，一般可以用来做“对话框”类型图形的左下小脚。

第一种：

#triangle-topleft {border: 30px solid #e6686e;height: 0;width: 0;border-right-color: transparent;border-bottom-color: transparent;
}

第二种：

#triangle-topleft {width: 0;height: 0;border-top: 60px solid #e6686e;border-right: 60px solid transparent;
}

第三种:

#triangle-topleft {border: 60px solid transparent;width: 0;height: 0;border-left-color: #e6686e;border-top-width: 0;
}

大家可以尝试更多种的三角形做法，以及不同朝向的三角形。
这里强烈推荐一个常用css图形的展示网站：https://css-tricks.com/the-sh...

Written by：EdenSheng
Email：singlesaulwork@gmail.com

CSS中左上朝向三角形(Top-Left Triangle)的几种制作方式相关推荐

php怎么弄三角形,css中怎么设置三角形
css中设置三角形的方法:首先创建一个HTML示例文件:然后设置一个span元素为块级元素,并分别设置border的四边都为不同的颜色:最后通过设置上边框和左右边框宽度实现三角形即可. 本教程操作环境 ...
css卷轴动画小程序,微信小程序动画两种实现方式
开发小程序,实现动画功能,有两种实现方式,下面来看看具体怎么做: JS动画利用小程序API提供的wx.createAnimation(OBJECT)实现,API中是这样说:创建一个动画实例anima ...
CSS中边偏移属性top，right，bottom，left
1:上边偏移属性用来定义元素顶部偏移位置的大小.top: auto | length | percent <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTM ...
css中border边框纹理,使用CSS3实现的几种纹理图案和大象拼图
CSS 语言: CSSSCSS 确定 .pattern1 { background: linear-gradient(135deg, #eee 25%, transparent 25%) -50px ...
html 将盒子固定浏览器,浏览器默认css样式表 css之左盒子固定,右盒子自适应的一种实现方式...
浏览器默认css样式表在页面布局或者是列表布局中,我们经常出现一个场景:左边是固定宽度的盒子,右边自适应:div>label>Open... maoguiyou 2016年09月13日 ...
js中Json对象与Json字符串互转(4种转换方式)
1>jQuery插件支持的转换方式: 复制代码代码如下: $.parseJSON( jsonstr ); //jQuery.parseJSON(jsonstr),可以将json字符串转换成jso ...
【MyBatis】MyBatis中，大于号、小于号的两种表达方式
1.转义法大于:> 小于:< 大于等于:>= 小于等于:<= 使用示例: BasicMunuMapper.xml <?xml version="1.0&quo ...
关于URP中RendererFeature的使用及毛发效果的几种实现方式
目录前言一.铺垫二.基于程序网格复制的实现三.基于程序多材质的实现四.基于RenderObjects手动配置的实现 4.1.多Pass实现多层毛发 4.2.override material ...
mybatis中的${} 与 #{}实际使用-模糊查询的几种实现方式
直接传参法直接传参法,就是将要查询的关键字keyword,在代码中拼接好要查询的格式,如%keyword%,然后直接作为参数传入mapper.xml的映射文件中. public void selec ...

CSS中左上朝向三角形(Top-Left Triangle)的几种制作方式

第一种：

第二种：

第三种:

CSS中左上朝向三角形(Top-Left Triangle)的几种制作方式相关推荐

最新文章

热门文章