如何使用CSS的border属性画个三角形

border三角形,实际上属于一种奇淫巧技。

利用的是border的一个特性:当一个元素的宽高都为0时,给border设置宽度(至少给2个相邻的边框设置宽度),border就会撑开这个元素。

四个边框同时设置宽度时,四个边最后在元素的中心汇成一个点。

 

因此当我们给一个有宽高的元素设置border时,四个边框的衔接方式是以对角线形式,而不是直角拼接,如图:

立即学习“前端免费学习笔记(深入)”;

如何使用CSS的border属性画个三角形

 

 

所以不设置宽高,给四个边框分别设置不同的颜色时就可以得到4个不同颜色不同方向的三角形:

如何使用CSS的border属性画个三角形

 

 

 想得到一个三角形的时候,不能单独设置一个边框,只设置一条边框的时候,它只是一条只有宽度没有高度的线,在页面中无法显示;

因此还是要同时设置4条边框或者给两个相邻的边框设置宽度,只给其中一个边框添加颜色即可:

设置4条边:

如何使用CSS的border属性画个三角形

 

只设置两个相邻的边:

如何使用CSS的border属性画个三角形

 

 

 

 

以上就是如何使用CSS的border属性画个三角形的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/3195678.html

(0)
上一篇 2025年4月1日 02:37:17
下一篇 2025年4月1日 02:37:27

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • 掌心有好几个三角图案好吗

    掌心有好几个三角图案好吗是很多人好奇的,毕竟很多友友对手相还是深信不疑的,也正是因为这样这个话题才成了焦点,下面小编就和大家一起看看掌心三角形有啥讲,哪些人手相有三角形。 掌心有好几个三角图案好吗 掌心有好几个三角图案好。 掌心有好几个三角…

    2025年4月17日
    722.2K00
  • style对象的cssText方法有哪些使用方法

    这次给大家带来style对象的csstext方法有哪些使用方法,style对象的csstext方法使用的注意事项有哪些,下面就是实战案例,一起来看一下。 cssText 本质是什么?   cssText 的本质就是设置 HTML 元素的 s…

    编程技术 2025年4月4日
    200
  • Photoshop制作空间感非常强的三角形放射光束

    效果图主要由放射光束及三角形框构成。每一部分虽然简单,都是由相似的图形构成,不过复制的时候还需要经过模糊及增加高光等操作,这样效果才更有层次感效果图主要由放射光束及三角形框构成。每一部分虽然简单,都是由相似的图形构成,不过复制的时候还需要经…

    2025年4月1日 编程技术
    200
  • photoshop打造出三维立体三角形图标

    先看效果图。   新建文档950×790像素,背景白色,建新层,做一矩形选区,填充#b5b5b5。    添加蒙版,黑白直线渐变,建新层,做一矩形选区,填充#d1d3d2,效果如下。   建新层,用自定义选择工具画出下图所示形状,…

    2025年4月1日 编程技术
    300
  • css3 中最出色的功能–flex 布局

    flex 布局是 css3 中使用最频繁也是最出色的功能,有点复杂,分为应用在容器上的属性和项目上的属性,即父元素上的与子元素上的属性。 父元素上的属性 display: flex div{display: flex; background…

    2025年4月1日 编程技术
    100
  • 浅谈对css伪类和伪元素的理解

    前言 今天主要谈谈css的伪类和伪元素。其实,关于伪类和伪元素,我在小工具css 选择器演示 中,写了不少伪类和伪元素,大家可以去看一下! 伪类和伪元素的理解 官方解释 伪类一开始单单只是用来表示一些元素的动态状态,典型的就是链接的各个状态…

    编程技术 2025年4月1日
    100
  • div+css命名规范大全

    一、命名规则说明: – top 1)、所有的命名最好都小写2)、属性的值一定要用双引号(“”)括起来,且一定要有值如class=”divcss5″,id=”divcss…

    编程技术 2025年4月1日
    100
  • 用CSS3、jQuery创建apple TV海报视差效果

    用css和jquery来实现它,尽量看起来和原效果一样。 最终效果图 本教程里,我将使用CSS,HTML和jQuery来创建一个近似Apple TV视差效果,如果你正在阅读,我假设你对上述三种技术都有基本的了解。 废话不多说,开始第一部分。…

    2025年4月1日 编程技术
    100
  • css中使用rgba()遇到的问题及解决办法

    今天遇到了一个问题,要在一个页面中设置一个半透明的白色div。这个貌似不是难题,只需要给这个div设置如下的属性即可: background: rgba(255,255,255,.1); 登录后复制 但是要兼容到ie8。这个就有点蛋疼了。因…

    2025年4月1日
    200
  • 关于Grunt压缩CSS和HTML的实例交汇处能

    我的小伙伴们!我明明 在压缩图片之前发过一篇,关于Grunt压缩cCSS是和HTML的!但是不知道为什么,今天再一看.迷之消失了! 没办法.只好今天在写一次,从头开始!首先.我来介绍一下为什么要用构建工具.让我来一个官方的回答: 一句话:就…

    2025年4月1日 编程技术
    100

发表回复

登录后才能评论