首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何创建一个三角形的左/右边框而不是梯形?

要创建一个三角形的左/右边框而不是梯形,可以使用CSS伪元素的技巧来实现。

对于创建左边框的三角形,可以使用一个具有透明背景色的矩形容器,并在其左侧添加一个小的正方形作为伪元素。然后通过调整伪元素的上边框和左边框的宽度,以及边框颜色来形成三角形的效果。具体的实现代码如下:

代码语言:txt
复制
<div class="triangle-left"></div>

<style>
.triangle-left {
  position: relative;
  width: 100px;
  height: 100px;
  background-color: transparent;
}

.triangle-left::before {
  content: '';
  position: absolute;
  top: 0;
  left: -10px; /* 调整此处的数值可以改变三角形的大小 */
  width: 0;
  height: 0;
  border-top: 50px solid transparent;
  border-right: 10px solid #000; /* 调整此处的颜色可以改变三角形的颜色 */
  border-bottom: 50px solid transparent;
}
</style>

对于创建右边框的三角形,可以使用类似的方法,只需将伪元素的位置调整到容器的右侧即可。具体的实现代码如下:

代码语言:txt
复制
<div class="triangle-right"></div>

<style>
.triangle-right {
  position: relative;
  width: 100px;
  height: 100px;
  background-color: transparent;
}

.triangle-right::before {
  content: '';
  position: absolute;
  top: 0;
  right: -10px; /* 调整此处的数值可以改变三角形的大小 */
  width: 0;
  height: 0;
  border-top: 50px solid transparent;
  border-left: 10px solid #000; /* 调整此处的颜色可以改变三角形的颜色 */
  border-bottom: 50px solid transparent;
}
</style>

这样就可以创建一个带有左边框或右边框的三角形了。你可以根据实际需要调整容器的宽度、高度、边框颜色以及三角形的大小来适配自己的设计。关于CSS伪元素的更多信息,可以参考MDN文档

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

原 荐 CSS深入理解之border

和大家举个栗子,大家就知道为啥border-width不支持百分比了,我们所熟知手机、显示屏,一小一大对吧,但他们边框都是一样呀,所以说边框其实是不应该随着元素增大减小变化,既然不变化,那何来百分比这一说...用border做三角等图形,想必大家都做过,这里就简单介绍一下如何三角形梯形和模拟圆角(IE里border-radius没有用,可以考虑用border来做哦)。...,分别对应上、、下、颜色 */ } 我们先把width和height都设成0会是什么样子呢?...相信大家已经看出一些东西了,这时候只要将对应四条边颜色设置成我们想要颜色就能得到三角形啦,具体做法就是,如果想要下三角(也就是下图),我们只需要把上边框保留红色,其他边都设成透明就可以了,其他形状三角如法炮制...(2)梯形 梯形就更简单了咩,直接上代码: 先看一个四个边都有颜色样子,和三角形做法一样,只要把不想要颜色设置成透明就欧拉。 ?

80241
  • 原 荐 CSS深入理解之border

    和大家举个栗子,大家就知道为啥border-width不支持百分比了,我们所熟知手机、显示屏,一小一大对吧,但他们边框都是一样呀,所以说边框其实是不应该随着元素增大减小变化,既然不变化,那何来百分比这一说...用border做三角等图形,想必大家都做过,这里就简单介绍一下如何三角形梯形和模拟圆角(IE里border-radius没有用,可以考虑用border来做哦)。...,分别对应上、、下、颜色 */ } 我们先把width和height都设成0会是什么样子呢?...相信大家已经看出一些东西了,这时候只要将对应四条边颜色设置成我们想要颜色就能得到三角形啦,具体做法就是,如果想要下三角(也就是下图),我们只需要把上边框保留红色,其他边都设成透明就可以了,其他形状三角如法炮制...(2)梯形 梯形就更简单了咩,直接上代码: 先看一个四个边都有颜色样子,和三角形做法一样,只要把不想要颜色设置成透明就欧拉。 ?

    72050

    【Flutter 专题】114 图解自定义 ACEProgressPainter 对比进度图

    和尚今天绘制一个简单 收入-支出 进度对比图;大致效果是在两个梯形中进行简单内容展示;为了提高可复用性,和尚预先设定如下规则; 左右两侧按比例展示对应尺寸,并注意大比例异常情况 左右两侧内容颜色支持自定义...ACEProgressPainter 和尚确定了设定规则,接下来就是实操了,主要是通过 Canvas 进行绘制,再分为绘制图形和绘制文字两部分; Canvas.drawPath 绘制梯形(三角形...根据比例绘制梯形 和尚预设一个左侧提醒比例,其中比例是以屏幕宽度整体计算,位于梯形中位线上,其中梯形角度预设为 45度 角,这样根据梯形高度即可计算梯形位置;右侧梯形类似,注意与左侧梯形间隔...异常比例 对于比例过小或过大情况,和尚计划展示一个固定三角形,并且在此状况下不进行文字绘制; // 左侧 if ((size.width * leftProgress + _height *...右侧文字 右侧文字相对于左侧略微复杂,首先通过 ParagraphStyle.textAlign 设置文字居,再计算右侧文字宽度时注意右侧文字绘制起始位置,注意边框宽度及两个梯形 spaceWidth

    71631

    CSS画圆、三角形、品字、骰子

    CSS画圆、三角形、品字、骰子 圆 让 border-radius属性值等于盒子高度一半就行(当然,盒子得是正方形才能得到圆,否则便不是圆) .circle { width...,但是第二个例子中,出现了梯形边框,这就是因为有左边框,同时还有上下边框,但是位置是有限,所以它们互相体谅,最后,每人拿一半。...: solid; border-left-color: blue; } 可以看到,三角形已经出来了,那么,设置边框颜色为透明,然后,只让一边边框有颜色,就能画出三角形 .triangle {...,不同是,三需要把第三个元素拖下来,第二个元素应该在中间 .box { display: flex; width: 90px;...justify-content: space-between;来实现,一人在,一人在

    1.2K20

    去解决更多问题,不是如何最好地解决一个问题

    人生不是走斜坡,你持续走就可以走到巅峰;人生像走阶梯,每一阶有每一阶难点,学物理有物理难点,学漫画有漫画难点,你没有克服难点,再怎么努力都是原地跳。所以当你克服难点,你跳上去就不会下来了。...成功的人生是台阶式向上,不是一条水平线。努力只是说明你拼命在走,跟你能不能向上走,关系不大。那些努力却没有结果的人,根本原因就在于,他一直走在平面上,没有走到更高台阶。...初学者经常问我,前端开发应该学习哪一个框架?我回答就是,你觉得哪一个框架比较容易,就用那个。因为它们都是解决同样问题,你只要知道怎么解决就可以了,没必要深究哪一个解决得更好。...对你更重要是,要去解决更多问题,不是如何最好地解决一个问题。 只有通过解决更多问题,人生才能摆脱水平运动,进入上升运动。...当然,这里还有一个天赋和兴趣问题,如果找到属于你领域,不用特别努力就能上台阶;如果找不对领域,再努力也只能做水平运动。 -- 转自:阮一峰

    73840

    30 个案例教你用纯 CSS 实现常见几何图形

    ),这时候border 看起来就会和现实中边框差不多: 因此,要绘制三角形,核心就是设置盒子宽高为 0,让 border 表现为一个三角形: .delta { width: 0px;...,下面有一个直径与矩形长度相等红色半圆,让半圆绕着圆心旋转,在这个过程中,绿色区域里面是不是就有一个角度不断变化扇形呢?...下面两个三角形也都是等腰三角形,需要利用几何关系计算各边长度。显然,只要知道等腰三角形面积和底边,那么就能推算出它高,高其实就是 border-bottom-width 。...原文做法是将放大镜把手定位到右侧再进行旋转,其实我们可以直接将把手定位到正下方,然后去旋转 .shape 不是 .shape::after,这样就可以方便地控制把手朝向。...指示箭头 指示箭头可以有两种做法: 原文采用是左图做法,用一个矩形 + 两个三角形来实现,但我们无法确定指示箭头所处背景颜色,所以无法确定第一个三角形应该采用什么颜色;如果采用做法,则无需考虑背景颜色问题

    5.2K30

    边框巧妙应用

    边框有一些特殊属性,可以采用边框来实现对话框效果,而且兼容性杠杠,不过在ie6下面可能会遇到兼容性问题,在后面分析它。...可以看到边框效果,4个等腰梯形。我们设置各个方向边框高度就是每个等腰梯形高。...可以想象得到,如果div高度和宽度都为0,那么这4个等腰梯形会变成等腰直角三角形; 如果分别设置每个方向边框高度,则变成一般三角形。 利用这个性质,我们可以再html上显示特殊字符▲▼△▽。...前文提到了ie6兼容性问题,我们在 .t-bd1中使用了ie6属性值hack,将solid边框背景色设置为环境色,否则在ie6下边框颜色设置为transparent部分呈现黑色。...网络上有一篇文章提到在ie6下给需要透明色边框设置border-style: dashed可以实现相同目的,但是我实验效果不是很理想。

    96280

    前端学习(12)~css学习(六):盒模型详解

    盒子中区域 一个盒子中主要属性就5个: width和height:内容宽度、高度(不是盒子宽度、高度)。 padding:内边距。 border:边框。 margin:外边距。...浏览器给默认margin大小是8个像素,此时占据了整个页面的一大部分区域,不是全部区域。...认识width、height 真实占有宽度 = border + padding + width + padding + border 如果想保持一个盒子真实占有宽度不变,那么加width时候就要减...; 综合属性写法:(上、、下、)(顺时针方向,用空格隔开。...margin道理也是一样) padding:30px 20px 40px 100px; 如果写了四个值,则顺序为:上、、下、。 如果只写了三个值,则顺序为:上、、下。一样。

    78220

    【前端基础面试题】如何用CSS画一个三角形(详解)

    详解 CSS3 positon定位详解(通俗易懂) 目录 教学        思路        答案         理解        疑问                 为什么不直接设置一个边框一个三角形...                宽高为什么设置为0,和不设置宽高区别 ---- 教学         思路   加粗边框,设置一个宽高为0中心点,通过对角线划分切割法,就得到了四个三角形,然后三个透明就可以得到一个三角形...,第一个就是大小红色正角形,第二个则是由边框构成正方形,两个正方形大小一样,左右上下边框各一对,一个边框100px一对200px,两个正方形大小一样。                ...疑问                 为什么不直接设置一个边框一个三角形 #square1 { width: 0px; height: 0px;...,宽度不知道是多少,div默认宽度为父元素100%,也就是占了body宽度,  这是不设置宽高 光设置边框结果,所以为了得到任意四个三角形一个  我们要设置 宽高,将宽高设置成0px,缩小中心点让它变成三角形不是梯形

    53320

    每天10个前端小知识 【Day 13】

    选择器 css3中新增了一些选择器,主要为如下图所示: 新样式 边框 css3新增了三个边框属性,分别是: border-radius:创建圆角边框 box-shadow:为元素添加阴影 border-image...怎么使用 CSS 如何一个三角形 盒子模型,默认情况下是一个矩形,实现也很简单。...,如果需要下方三角形,只需要将上、、右边框设置为0就可以得到下方红色三角形: 但这种方式,虽然视觉上是实现了三角形,但实际上,隐藏部分任然占据部分高度,需要将上方宽度去掉。...,边框实际上并不是一个直线,如果我们将四条边设置不同颜色,将边框逐渐放大,可以得到每条边框都是一个梯形。...将窗体自上而下分成一行一行,并在每行中按从依次排放元素,称为文档流,也称为普通流。 这个应该不难理解,HTML中全部元素都是盒模型,盒模型占用一定空间,依次排放在HTML中,形成了文档流。

    13110

    如何每次运行程序时,都会将数据添加到对应keys中,不是重新创建一个dict啊?

    一、前言 前几天在Python最强王者交流群【 】问了一个Python项目实战问题,问题如下:请问,我如何每次运行程序时,都会将数据添加到对应keys中,不是重新创建一个dict啊。...二、实现过程 这里【东哥】基于粉丝代码,做了一份修改,修改后代码如下: import json def load_data(): try: with open('user.json...如果你也有类似这种Python相关小问题,欢迎随时来交流群学习交流哦,有问必答! 三、总结 大家好,我是Python进阶者。...这篇文章主要盘点了一个Python项目实战问题,文中针对该问题,给出了具体解析和代码实现,帮助粉丝顺利解决了问题。...最后感谢粉丝【 】提出问题,感谢【东哥】给出思路,感谢【莫生气】等人参与学习交流。

    10810

    OpenGL ES 2.0 (iOS):熟练图元绘制,玩转二维图形

    LINES 图形分析 首先它们都是线,所以选择是 线模式; 左侧就是一条线 -> GL_LINES,有两个顶点坐标,而且坐标是高 右侧是两条交叉线 -> GL_LINES,有四个顶点坐标 nPoints...LINE LOOP 图形分析 多段线首尾相接组成几何形状,GL_LINES_LOOP 模式; nPoints = mLines 开始写代码 数据源(从),其中五角星这个数据,可以利用内五边形与外五边形相结合方法...不然图形是不能正确地绘制出来; 这里容易出问题是最后一个图形(五角星形),三角形与点关系:10(点数量) = 10(分割出来三角形数量) + 2,很明显是不相等,所以 10 个点是不可能绘制出来这个图形...Challenges 这里目的不是为了绘制它们进行绘制,而是针对图元绘制做一个深入学习,要学习分析图形和寻找合适有效绘制方式,而且还要做到判断数据大致生成方法方式是什么,不然你永远都只是一个只会搞代码搬运工而已...Card 提示:把数据分成中线,三种,原因是左边数据是用贝塞尔曲线生成数据量非常大;主要是利用 glBufferSubData 与 glBufferData 结合,以及 glVertexAttribPointer

    1.6K10

    「后端小伙伴来学前端了」CSS 做三角边框,必会基础操作之一

    前言: 这个也是我最近学习才发现一个细节,就是常常会在一些网站,看到下面图中这样一个小三角,以前没怎么学CSS,我一直以为它是个精灵图之类。...一、CSS三角做法 我们先简单说一下,如何把三角画出来,懂用什么画之后,基本就完事了。...页面展示效果就是一个四个小三角拼成正方形。...盒子每一边边框都是梯形,盒子大小为0时,梯形上底(边框内边)也为0,所以两边会合并成三角形。 原理图大致就如下: 当最后它中间盒子宽度、高度都为零,就成了角形。...二、CSS京东应用 原理知道了之后,我们来做一个小小案例吧。

    37030

    matlab画点图如何设置点大小颜色_matlab如何根据点绘制曲线图

    实心圆 c 青绿色 x 叉号符 m 洋红色 s 正方形 y 黄色 d 菱形 k 黑色 ^ 上三角形 w 白色 v 下三角形 > 三角形 < 三角形 p 五角星...Matlab中,plot绘图曲线线宽、标记点大小、标记点边框颜色和填充颜色设置 1、LineWidth:用于设置线宽,其后ProperValue选项为数值,如0.5,1,2.5等,单位为points​...; 2、MarkerEdgeColor:用于设置标记点边框线条颜色,其后ProperValue选项为颜色字符,如‘g’,’b’,’k’等​; 3、MarkerFaceColor:用于设置标记点内部区域填充颜色...,其后ProperValue选项为 颜色字符,如‘g’,’b’,’k’等​​; 4、Markersize:用于设置标记点大小,其后ProperValue选项为数值,单位为points。​...为了让大家方便理解,直接给例子:将自己数据写成3列10行命名为PP,然后复制下面代码进去,就知道A如何设置这4个参数了。

    8.4K20

    只用1个div,你能用CSS常规属性绘制:正3、4、5、6、7、8边形吗?

    开篇 今天我们来玩一个有趣CSS实验,想象下,只用一个div,你能用CSS绘制一个三角形,正方形,正五边形,正六边形,正七边形,正八边形吗?...01 正三角形三角形不需要用到伪元素,只需要设定div本身边框宽度即可产生,先来看一下正三角形边长与中线,若边长为100px,则中线四舍五入就是87px(100 x sin( 60)= 87)。...让我们先把正五边形分解,用原本div作为上方三角形,然后用一个伪元素制作下方梯形,因为正五边形每边夹角为108度,所以可以藉由三角函数计算出上方三角形高度为59px ( 100 x cos(54...05 正七边形 正七边形开始就必须再使用after 这个伪元素了,因为正七边形必须要拆解为三个区块,分别是用原本div作为上面的三角形一个伪元素作为中间梯形,然后另一个伪元素作为底部梯形,正七边形夹角比较特殊不是整数...,我们的确用一个div,再结合三角函数相关知识,一口气绘制完了正三角形、正方形、正五边形、正六边形、正七边形、正八边形,是不是很有趣呢。

    1.2K30

    8个硬核技巧带你迅速提升CSS技术

    列声明固定宽度,列声明flex:1自适应宽度。...从原理上正确理解其成因,才能无需复制粘贴就能得心应手地绘制各种三角形。以下从零到一熟悉一次绘制三角形原理。 绘制一个边框分别为四种颜色正方形。 ?...细心同学可能还会发现三角形宽是高2倍,高正好是边框宽度border-width。...从中可得出一个技巧:「若绘制三角形方向为左右上下,则将四条边框颜色声明为透明且将指定方向反方向边框着色,即可得到所需方向三角形」。...先将两个三角形错位叠加生成一个箭头状图形,再将该图形叠加到带边框圆角矩形右边,最后将黑色三角形着色成白色,就能得到上图边框气泡对话框了。 ?

    2.8K30

    三菱plc编写最简单梯形图演示_三菱plc梯形图实例详解

    (3)梯形图中常开、常闭触点不是现场物理开关触点。它们对应输入、输出映象寄存器或数据寄存器中相应位状况,不是现场物理开关触点状况。...(4)梯形图中输出线圈不是物理线圈,不能用它直接驱动现场施行安排。输出线圈状况对应输出映像寄存器相应状况不是现场电磁开关实习状况。...有一点需求阐明是,这篇文章虽以三菱plc为例,但这些规矩在其它plc编程时也可一样遵照。 一,梯形阶梯都是始于左母线,总算母线(通常能够省掉不画,仅画母线)。...如图(b)所示: 三,并联块串联时,应将接点多去路放在梯形图左方(轻准则);串联块并联时,应将接点多并联去路放在梯形上方(上重下轻准则)。...PLC按输入映象区内容进行逻辑运算,并把运算作用写入到输出映象区,不是直接输出到端子。 3,输出改写时期 PLC依据输出映象区内容改动输出端子状况。这才是PLC实习输出。

    2K40
    领券