CSS绘制常见的三角形

最新推荐文章于 2024-06-14 21:21:15 发布
最新推荐文章于 2024-06-14 21:21:15 发布
阅读量332 收藏
点赞数
分类专栏： css知识杂货铺
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/amytun_yu/article/details/62215632
版权

给css的世界添点料：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>css绘制三角形</title>
        <style type="text/css">
            div{
                float: left;
            }
            .sj1{
                /*向上的三角形*/
                font-size:26px;
                color: #000000;
                width: 0;
                height: 0;
                border-left: 125px solid transparent;
                border-right: 125px solid transparent;
                border-bottom: 250px solid #00CED1;
            }
            .sj2{
                /*down*/
                /*向下的三角形*/
                font-size: 26px;
                color: #000000;
                width: 0;
                height: 0;
                border-left: 125px solid transparent;
                border-right: 125px solid transparent;
                border-top: 250px solid lightcoral;
            }
            .sj3{
                /*left*/
                /*向左的三角形*/
                font-size: 26px;
                color: #000000;
                width: 0;
                height: 0;
                border-top:125px solid transparent;
                border-right: 250px solid mediumturquoise;
                border-bottom: 125px solid transparent;
            }
            .sj4{
                /*right*/
                /*向右的三角形*/
                font-size: 26px;
                color: #000000;
                width: 0;
                height: 0;
                border-top:125px solid transparent;
                border-left: 250px solid mistyrose;
                border-bottom: 125px solid transparent;
            }
            .sj5{
                /*left top*/
                /*左上角的三角形*/
                font-size: 26px;
                color: #000000;
                width: 0;
                height: 0;
                border-top: 250px solid red;
                border-right: 250px solid transparent;
            }
            .sj6{
                /*bottom right*/
                /*右下角的三角形*/
                font-size: 26px;
                color: #000000;
                width: 0;
                height: 0;
                border-bottom: 250px dashed deepskyblue;
                border-left: 250px solid transparent;
            }
            div:hover{
                cursor: pointer;
                transform: rotate(720deg);
                transition: 5s;
            }
        </style>
    </head>
    <body>

        <!--常见三角形的绘制-->
        <div class="sj1">
            up
        </div>
        <div class="sj2">
            down
        </div>
        <div class="sj3">
            left
        </div>
        <div class="sj4">
            right
        </div>
        <div class="sj5">
            top left
        </div>
        <div class="sj6">
            bottom right
        </div>
    </body>
</html>

加上效果图就一目了然了喔♪(^∇^*)

这里写图片描述

颜洁
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css绘制实心三角形
hxf6060的博客
04-30 998
用css绘制三角形原理其实很简单，用到的是border-color，这个属性可以设置四条边框的颜色： border-color:red green blue pink; 上边框是红色 右边框是绿色 下边框是蓝色 左边框是粉色 我们来把一个盒子宽高都设置为0，只给边框： html: <i class="caret-con"></i> css: i{ ...
CSS 绘制三角形
u011848617的专栏
10-30 165
Step 1 一般我们使用border时是这样的： #border-style { width: 50px; height: 50px; border-top: 1px solid black; border-left: 1px solid black; border-right: 1px solid black; border-bottom:...
css绘制三角形
热门推荐
weixin_46429281的博客
08-05 1万+
css绘制三角形 /运用实例
CSS绘制三角形的方法
Cc040909的博客
06-14 428
通过设置 border-left 和 border-right 为透明，border-bottom 为实色，就可以得到一个倒三角形的形状。1、50% 0 表示第一个顶点的 x 坐标为 50%(相对于元素的宽度)，y 坐标为 0%(相对于元素的高度)。这个点位于元素的顶部中心。3、100% 100% 表示第三个顶点的 x 坐标为 100%(元素的最右侧)，y 坐标为 100%(元素的底部)。2、0 100% 表示第二个顶点的 x 坐标为 0%(元素的最左侧)，y 坐标为 100%(元素的底部)。
CSS绘制三角形
泛泛格调
10-25 190
我们的网页因为 CSS 而呈现千变万化的风格。这一看似简单的样式语言在使用中非常灵活，只要你发挥创意就能实现很多比人想象不到的效果。特别是随着 CSS3 的广泛使用，更多新奇的 CSS 作品涌现出来。今天给大家带来 CSS 三角形绘制方法 代码如下:#triangle-up {&nbsp;&nbsp;&nbsp;&nbsp;width: 0;&nbsp;&nbsp;&nbsp;&nbsp;hei...
css绘制透明三角形
09-24
主要教大家使用css绘制透明三角形，css绘制三角形很简单，如何绘制透明的三角形，本文为大家解决这个问题，感兴趣的小伙伴们可以参考一下
Html+CSS绘制三角形图标
09-28
本文将详细介绍如何使用HTML和CSS3绘制三角形图标。 首先，我们需要了解CSS3中的边框（border）属性。边框宽度（border-width）、边框样式（border-style）和边框颜色（border-color）是控制边框的关键。当一个元素...
用CSS代码绘制三角形 纯CSS绘制三角形的代码
12-30
1、新建一个元素，随便什么元素，不过我习惯性的会用块元素来做。如果行内元素就display:block它。...到这里就很清晰了，只要把想要的保留，其它的设置为透明就可以达到三角形的效果，那么：border:5
纯CSS绘制三角形箭头效果
09-25
这是很容易，但我想让提示框上有一个三角形的箭头。可是，一想到这需要使用图片，并且各种颜色，各种方向的箭头要准备无数种，这几乎是一种灾难。幸运的是，MooTools的核心开发着Darren Waddell告诉了我一个非常棒
统计预测与决策课程实验
07-06
内含实验与完整程序
上市公司工业机器人渗透度数据集（2007-2022年）.txt
07-06
因文件较多，数据存放网盘，txt文件内包含下载链接及提取码，永久有效。失效会第一时间进行补充。样例数据及详细介绍参见文章：https://blog.csdn.net/T0620514/article/details/140237650
arduino创意作品.docx
07-06
Arduino创意作品是基于Arduino开发板的创新性项目，涵盖了多个领域，如机器人、智能家居、艺术装置等。Arduino的开源性质和简单易用的特点，使得这些创意作品能够轻松实现，并展现出丰富的想象力和创造力。以下是一些Arduino创意作品的示例： 1. 智能家居控制系统 功能描述：使用Arduino板和传感器构建一个智能家居控制系统，可以控制灯光、温度、湿度、空调、窗户和安全系统等设备。用户可以通过手机应用程序远程控制这些设备，实现家居的智能化管理。 应用场景：适用于现代家庭，提升居住舒适度和便利性。 2. 自动浇水系统 功能描述：将Arduino板与水泵和土壤湿度传感器配合使用，构建一个自动浇水系统。系统可以实时监测土壤湿度，并根据设定的阈值自动开启或关闭水泵，保证植物的健康成长。 应用场景：适用于家庭园艺、温室大棚等场景，减轻人工浇水的负担。 3. 智能车辆 功能描述：使用Arduino板和电机控制器构建一个智能车辆，可以通过遥控器或移动设备进行控制。车辆还可以添加传感器以提高安全性能，如避障传感器、红外传感器等。 应用场景：适用于玩具车、教育机器人等场景，提供趣味性和教育
数学建模流程指南：实际的问题到解决方案
07-07
数学建模是一个将数学方法应用到实际问题的过程，它涉及到以下几个关键步骤： 1. **问题定义**： - 明确问题的目标和需求。 2. **数据收集**： - 收集与问题相关的数据。 3. **模型选择**： - 根据问题特性选择合适的数学模型，如线性模型、微分方程、概率模型等。 4. **模型建立**： - 使用数学语言描述问题，建立数学模型。 5. **模型求解**： - 使用数学方法或计算机软件求解模型。 6. **结果分析**： - 分析求解结果，验证模型的合理性。 7. **模型验证与改进**： - 通过实际数据验证模型的准确性，必要时对模型进行调整和优化。 8. **报告撰写**： - 撰写模型建立和求解过程的详细报告。 9. **应用实施**： - 将模型应用于实际问题，进行决策支持。 数学建模在很多领域都有应用，如经济学、物理学、工程学、生物学等。建模的目的是为了更好地理解问题、预测未来趋势或优化决策过程。在建模过程中，通常需要使用数学软件（如MATLAB、Mathematica、R语言等）来辅助计
埃森哲制药企业数字化转型项目顶层规划方案两套资料.pptx
07-06
埃森哲制药企业数字化转型项目顶层规划方案两套资料.pptx
大型供应链系统技术架构设计方案.pptx
07-06
大型供应链系统技术架构设计方案
408c语言数组-gets-puts-str系列-scanf字符型数组
07-07
常量表达式：常量和符号常量，不能包括变量。 ○ 数组长度大小为0没有意义。方括号不能写成圆括号。不能用变量声明数组大小。 ○ int a[]={1,2,3,4,5}，计算机会自动识别长度为5。但是初始不建议，乖乖写上就好。 ○ 不能写成int a[10]; a[10]={1,2,3,4,5,6,7,8,9,10} ● 数组名传递到子函数后，子函数的形参接收到的是数组的起始地址，8个字节。 数组的长度是传递不过来的。 ● 使用%s来输出一个字符串，直接把字符数组名放在printf后面的位置。 ● 初始化2：双引号。注意c语言规定字符串的结束标志为'\0'。所以char a[10]最长存储9个字符，剩余一个存'\0'。 ● scanf的%s输入完成后会自动填一个'\0'进去。 ● gets读到'\n'就不读，然后会在数组最后存上'\0'. ● windows下使用VS的集成开发环境，不能使用gets，使用fgets(c,sizeof(c),stdin); ● strcmp(a,b)：a大于b，返回的是正值；相等是0；a小于b，返回负值。
基于matlab图像处理的计数程序
最新发布
07-07
在很多的实验过程中，需要对实验样品进行计数，而人工计数的方式效率比较低，且容易计数错误。为了方便对样品进行计数，笔者设计了一套基于matlab图像处理的计数程序，以增加计数的效率和准确度。
ISO 12233-2017.doc
07-07
ISO 12233-2017.doc
2024年挖掘机配件行业分析报告.pptx
07-07
行业报告
用css绘制一个三角形
08-28
你可以使用CSS的border属性来绘制一个三角形。下面是一个示例代码： ```html <!DOCTYPE html> <html> <head> <style> .triangle { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red; } </style> </head> <body> <div class="triangle"></div> </body> </html> ``` 在这个示例中，我们创建了一个用于展示三角形的div元素，并为其添加了一个类名为"triangle"。通过设置元素的宽度和高度为0，并使用border属性设置边框样式，我们可以创建一个只有底边有颜色的三角形。你可以根据需要调整宽度、颜色和其他样式属性来自定义三角形的外观。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值