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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • SecureCRTPortable SecureCRT上传bash: rz: command not found

    SecureCRTPortable SecureCRT上传bash: rz: command not found-bash:rz:commandnotfoundrz命令没找到?执行sz,同样也没找到。安装lrzsz:#yum-yinstalllrzsz现在就可以正常使用rz、sz命令上传、下载数据了。使用方法:上传文件#rzfilename下载文件#szfilename

    2022年6月3日
    28
  • mysql timestampdiff datediff_「timestampdiff」datediff()函数 与 timestampdiff()函数的区别 及使用。 – seo实验室…

    mysql timestampdiff datediff_「timestampdiff」datediff()函数 与 timestampdiff()函数的区别 及使用。 – seo实验室…timestampdiff在操作数据库时,经常会使用到“时间范围取值、取时间差”的情况。今天就学习了一个这两个求时间差的函数。1.先从名字上来区分这两个函数的区别。datediff()//看名字“直译”过来的意思是《日期差异》(胡乱翻译的不是很正确哦!)timestampdiff()//这个也“值译”过来《时间戳差异》从名字就能大概区分他们的租作用,一个比较时间戳的,一个是比较日期的。…

    2022年6月4日
    40
  • 【转】C:经典技巧,不用临时变量,交换变量值

    【转】C:经典技巧,不用临时变量,交换变量值

    2021年8月15日
    49
  • GitHub 热榜:轻量级无 Agent 的自动化运维平台!「建议收藏」

    GitHub 热榜:轻量级无 Agent 的自动化运维平台!「建议收藏」大家好,我是JackTian。作为一名运维工程师,大家都知道。早在几年前,偏传统运维,以cacti、nagios为主流,到后来的zabbix、Prometheus、Open-Falcon等,也是现在大多数企业用的偏多的运维监控平台。甚至有些企业,都是自主研发。不管是自主研发还是用开源的,其最终目的都是为了提高日常运维工作效率。那么,今天杰哥给大家推荐一款GitHub热榜开源运维平台——spug。这款开源运维平台是:面向中小型企业设计的轻量级无Agent的自动化运维平台,其主要功能

    2022年5月13日
    58
  • MySql批量插入语句(INSERT)[通俗易懂]

    MySql批量插入语句(INSERT)[通俗易懂]这里写自定义目录标题欢迎使用Markdown编辑器创建数据库新的改变功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能,丰富你的文章UML图表FLowchart流程图导出与导入导出导入欢迎使用Markdown编辑器你好!这是你第一次使用Markdown编辑器所展示的欢迎页。如果你想学习如何

    2022年10月5日
    2
  • python进阶(4)文件操作[通俗易懂]

    python进阶(4)文件操作[通俗易懂]文件操作文件操作主要包括对文件内容的读写操作,这些操作是通过文件对象实现的,通过文件对象可以读写文本文件和二进制文件open(file,mode='r',buffering=-

    2022年7月28日
    9

发表回复

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

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