使用css的border属性实现三角形

使用cssborder属性实现三角形

1. border使用方法

使用css的border属性实现三角形

2. border 三角形

2.1. 三角形原理,我们来看一个普通的底部边框

使用css的border属性实现三角形

2.2. 我们在右边添加一个边框,细心留意两个border的交界就是一个斜线

使用css的border属性实现三角形

2.3. 我们在左边边添加一个边框2.4. 试想一下,我们把左右边框变成了透明的,是怎么样的呢?

使用css的border属性实现三角形

已经变成了梯形了啊,我们怎么样把她变成三角形呢?

2.5. 我们把宽度高度设置为0

使用css的border属性实现三角形

一个向上三角形已经出现了啊

以上代码有简写方式:

使用css的border属性实现三角形

2.6. 除了向上三角形,还有向下,向左,向右三角形
使用css的border属性实现三角形

本文来自投稿,不代表重蔚自留地立场,如若转载,请注明出处https://www.cwhello.com/9122.html

如有侵犯您的合法权益请发邮件951076433@qq.com联系删除

(0)
重蔚的头像重蔚管理团队
上一篇 2018年5月7日 09:40
下一篇 2018年5月7日 09:47

相关推荐

  • 我来教你html设置隐藏内容。

    隐藏域(Hidden Field)是HTML表单中的一种元素,它允许我们在提交表单时存储用户无法直接看到或修改的信息,这些信息可以用于各种目的,如跟踪用户的行为、存储会话状态等,在HTML中,我们可以通过设置type="…

    2024年6月24日
    00
  • css+div布局学习步骤?

    认清目的 首先要认识为什么要学习CSS,知道学习CSS目的是什么。 认识学习目的才能坚持持之以恒、认识学习目的才有目的性从中得到乐趣和享受! 基础学习 1、了解CSS作用是什么? 2、css基础知识 3、了解常用css属性…

    2017年12月19日
    0415
  • web前端设计表格布局和div+CSS布局。

    发展过程 上个世纪Web开发人员流行使用表格进行文档整体布局。因为当时大部分浏览器不支持CSS,而且大部分人不会CSS,且没有文档拆分设计,致使文档臃肿,到了上个世纪末大部分没有相关背景的人进入,对于那些没有…

    2022年7月4日 建站资讯
    0338
  • 我的php学习第六天之css篇

    昨日回顾 CSS的介绍 CSS,Cascading Style Sheets层叠样式表。 一个网页由三个部分:结构、表现、行为,对应的标准是:XHTML、CSS、JavaScript。 这三个标准语言,是浏览器直接可以识别的,并且能直接进行解释(翻译…

    2015年10月14日 css自学教程
    0310
  • 我来分享如何在html加背景。

    在HTML中添加背景主要可以通过设置CSS样式来实现,以下是详细的步骤和示例代码: (图片来源网络,侵删) 1. 使用内联样式 你可以直接在HTML元素的style属性中设置背景,为整个页面设置背景颜色或背景图片: <!D…

    2024年6月25日
    01
  • css涉及的英语单词!

    Css(cascading  style sheet)  (级联样式表) a:active 单击鼠标左键 italic(倾斜) word-spacing  单词和单词之间的距离 underline下划线    Font-size文字的大小 Background-color:背景颜色 Background-attachm…

    2018年4月28日
    0373
  • 今日分享网站使用css布局有哪些好处和坏处。

    网站使用CSS布局的好处 随着互联网技术的不断发展,网站的设计和开发变得越来越重要,在这个过程中,CSS布局成为了网站设计的主流技术,CSS(Cascading Style Sheets,层叠样式表)是一种用于描述网页外观和格式的…

    2024年7月24日
    01
  • 聊聊css怎么设置背景图片透明度。

    你可以使用CSS中的opacity属性来设置背景图片的透明度。你可以将背景图片放在一个div中,然后使用以下代码将其透明度设置为0.5: ,,“css,div {, background-image: url('your-image-url');, opacity: 0.5…

    2024年7月18日
    04

联系我们

QQ:951076433

在线咨询:点击这里给我发消息邮件:951076433@qq.com工作时间:周一至周五,9:30-18:30,节假日休息