css 画三角形

css 画三角形1、斜边在左边三角形<style>.triangle{border-top:50pxsolidtransparent;border-bottom:50pxsolidtransparent;border-left:50pxsolid#000;…

大家好,又见面了,我是你们的朋友全栈君。

1、斜边在左边三角形

 <style> .triangle { border-top: 50px solid transparent; border-bottom: 50px solid transparent; border-left: 50px solid #000; width:0; height:0; } </style>
 <div class="triangle"></div>

2、斜边在上面的三角形

<style> .triangle { border-left: 50px solid transparent; border-right: 50px solid transparent; border-top: 50px solid #000; width:0; height:0; } </style>
 <div class="triangle"></div>

3、斜边在下边的三角形

 <style> .triangle { border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 50px solid #000; width:0; height:0; } </style>
 <div class="triangle"></div>

4、斜边在右边的三角形

 <style> .triangle { border-top: 50px solid transparent; border-bottom: 50px solid transparent; border-right: 50px solid #000; width:0; height:0; } </style>
 <div class="triangle"></div>

5、等边三角形(等边三角形的底边的高是底边的1/sqrt(2)倍)

 <style> .triangle { border-left: 40px solid transparent; border-right: 40px solid transparent; border-bottom: 28px solid #000; width:0; height:0; } </style>
 <div class="triangle"></div>
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/148063.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 银行家算法c语言加注释,银行家算法 C语言编程[通俗易懂]

    银行家算法c语言加注释,银行家算法 C语言编程[通俗易懂]匿名用户1级2011-06-02回答银行家算法程序代码#include#include#include#defineFALSE0#defineTRUE1#defineW10#defineR10intM;//总进程数intN;//资源种类intALL_RESOURCE[W];//各种资源的数目总和intMAX[W][R];//M个进程对N类资源最大资…

    2022年7月22日
    9
  • Idea激活码最新教程2021.2.4版本,永久有效激活码,亲测可用,记得收藏

    Idea激活码最新教程2021.2.4版本,永久有效激活码,亲测可用,记得收藏Idea 激活码教程永久有效 2021 2 4 激活码教程 Windows 版永久激活 持续更新 Idea 激活码 2021 2 4 成功激活

    2025年5月22日
    3
  • python机器视觉opencv_opencv轻松入门:面向python电子版

    python机器视觉opencv_opencv轻松入门:面向python电子版以下是快速学完OpenCV+python计算机视觉图像处理的个人总结。任何知识或者学科都不可能快速学会,一口吃不成大胖子,想要学会,只能一点一点积累。不积跬步无以至千里,不敲千遍无可能懂理。想要学会,不能光看,须知熟才能生巧,一定要多敲!一定要多敲!一定要多敲!视频链接请点击这里代码连接请点击这里,提取码:iukw看完视频一定要手动敲,不然最后只是眼睛会了,脑子和手却不会。以下是Windows、Linux、Mac深度学习环境搭建详细教程:1、windows搭建深度学习环境详细教程2、L

    2025年8月28日
    7
  • 分布式 mybatis-plus 逻辑删除不生效 升级后org.mybatis.logging.LoggerFactory报错[通俗易懂]

    分布式 mybatis-plus 逻辑删除不生效 升级后org.mybatis.logging.LoggerFactory报错[通俗易懂]解决方案:第一步:升级mybatisplus版本到3.2.0第二步.多添加一个扩展包<dependency><groupId>com.baomidou</groupId><artifactId>mybatis-plus-extension</artifactId&gt…

    2022年6月2日
    58
  • win10系统显示打印机未连接到服务器,win10系统无法连接到打印机的解决方法

    win10系统显示打印机未连接到服务器,win10系统无法连接到打印机的解决方法很多小伙伴都遇到过win10系统无法连接到打印机的困惑吧,一些朋友看过网上零散的win10系统无法连接到打印机的处理方法,并没有完完全全明白win10系统无法连接到打印机是如何解决的,今天小编准备了简单的解决办法,只需要按照1、右键点击开始菜单,选择弹出菜单中的“控制面板”,2、在控制面板里点击“管理工具”,如果找不到的话先将右上角的查看那方式修改为【小图标】或【大图标】的顺序即可轻松解决…

    2022年6月9日
    70
  • java中println和printf有什么区别_java println和print

    java中println和printf有什么区别_java println和printJava语言中print和println的区别简单的说:print意思是:打印而println是print+line的缩写,即:换行打印举例打印1和2:⑴不换行打印:publicclassMyDemo{ publicstaticvoidmain(Stringargs[]){ inti=1; intj=2; System.out.print(i)…

    2025年6月18日
    2

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号