网页做三角形图片，你还在拿ps调整吗？out了，老铁，来和我一起脑海畅想一个正方形是由4个等腰直角三角形构成，然后我想保留上边的三角形，那下边、左边、右边的三角形就没了（设置背景色transparent或者与背景相近的颜色），最终结果就是一个保留上边，方向朝下的三角形，需要注意一点的是设置的css样式中width=0，如果不是就不能构成正方形，而是一个梯形；此外还可以通HTML实体里的三角形符号，朝上&#9650朝下&#9660朝左&#9668朝右&#9658，最后通过font的大小颜色控制三角形！

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <title>怎样不用图片来做一个三角形图标</title>

     <style type="text/css">

     *{

         margin: 0;

         padding: 0;

     }

     /* .box1,.box2,.box3,.box4{

         font-size: 66px;

         color: lightcoral;

         cursor: pointer;

     } *//*HTML实体里的三角形符号*/

     .box{

         width: 0px;

         border-left: 100px solid red;

         border-right: 100px solid yellow;

         border-top: 100px solid green;

         border-bottom: 100px solid #000;

     }/*四个三角形构成一个正方形，想要哪个边另外三边transparent*/

     .box{

         width: 0px;

         border-left: 100px solid transparent;

         border-right: 100px solid transparent;

         border-top: 100px solid red;

         border-bottom: 100px solid transparent;

     }

     .triangle1{

         width: 0px;

         border: 100px solid yellow;

         border-top-color:transparent;

         border-left-color: transparent;

         border-right-color: transparent;

     }

     /*需要多大的三角形就设置相应像素的border值，然后将其中三个方向的边框颜色设置为透明或者将边框颜色设置为与背景相同的颜色即可*/

     </style>

 </head>

 <body>

     <!-- 方法一 -->

     <div class="box1">&#9650</div>

     <div class="box2">&#9660</div>

     <div class="box3">&#9668</div>

     <div class="box4">&#9658</div>

     <!-- 方法二 -->

     <div class="box"></div>

     <div class="triangle1"></div>

 </body>

 </html>

如果想了解更多纯CSS写三角形-border法，建议参考下小平头~ 与mumu42(后续有时间再补全该页面border书写三角形的方法)

如何利用border书写三角形，建议考虑正方形的更多相关文章

  1. 利用Border画三角形

    边框 1.边框其实并不是矩形,而是梯形 2.利用边框画三角形: div.a{ width:0px; height:0px; border:10px white solid; border-top-co ...

  2. 利用border制作三角形原理

    网站前端页面中,有时候会使用一些三角形,除了使用图片的方式之外,利用css的border属性也可以做出相对应的三角形.那么,利用border是如何实现三角形的制作的呢? 先看下面一个例子: CSS代码 ...

  3. CSS学习笔记：利用border绘制三角形

    在前端的笔试.面试过程中,经常会出现一些不规则图形的CSS设置,基本上多是矩形外加一个三角形.利用CSS属性可以实现三角形的生成,主要利用上下左右的边距的折叠. 1.第一种图形: .box { wid ...

  4. css 利用border 绘制三角形. triangle

    1.基础三角形. <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  5. CSS深入了解border：利用border画三角形等图形

    三角形实际上是border的产物 我们正常使用的border都是四边一个颜色,当我们把四边换上不同颜色 那么你就会发现,三角来了~! <!DOCTYPE html> <html la ...

  6. 【前端小技巧】利用border画三角形及梯形

    border是围绕元素内容和内边距的一条或多条线,border 属性允许你规定元素边框的样式.宽度和颜色 值: border-width 粗细 none/hidden/solid/dashed/dot ...

  7. 利用border和伪类画出三角形 ps：好久没写博客了。。。

    有一个半月没有写博客了,这段时间,小哥我经历了自入行前端最为黑暗的时期,迷茫,空虚,不想写代码,不想做研究了.连打游戏都没有兴趣,如同行尸走肉一般.还好,毕业论文的初稿完成后,整个时间段最恶心最难熬的 ...

  8. border绘制三角形

    (1)有边框的三角形 我们来写下带边框的三角形. 如果是一个正方形,我们写边时,会用到border,但我们这里讨论的三角形本身就是border,不可能再给border添加border属性,所以我们需要 ...

  9. 使用border做三角形

    网站上经常会使用一些三角形,除了图片的方式,实际上利用border我们可以做出纯CSS的三角形.我们知道border是个边抖可以单独设置,当四个边相交的时候他们是什么时候改变的? .t0{ margi ...

随机推荐

  1. .net core mysql CodeFirst

    创建两个项目 1.网站 2.Model层 引用DLL Microsoft.EntityFrameworkCore Microsoft.EntityFrameworkCore.Design Micros ...

  2. 趣学CCNA 路由与交换

    第1章 OSI和TCP/IP 11.1 协议与协议分层 31.2 OSI参考模型 61.2.1 物理层 91.2.2 数据链路层 91.2.3 网络层 101.2.4 传输层 101.2.5 会话层 ...

  3. 正则表达式在c++中的实现

    这个是最基础的解释器,它实现了串联.并联.克林闭包,字符集为除了()|*的ASCII字符,而且不能判断表达式合法,效率还很低,内存利用率低. 它只能判读输入的字符串是否符合表达式. #include& ...

  4. Centos 7 下部署集群式阿波罗

    apollo工作原理 用户通过浏览器登录Portal管理界面 >> 通过Admin server对配置进行修改 >> 应用程序主动向config server配置注意:Port ...

  5. centos7安装mysql5.5.62

    mysql是我们最常用的开源的关系型数据库,mysql不同版本有时候安装的方式也不尽相同,下面梳理一下mysql5.5.62版本的安装 1.下载mysql5.5.62,URL:https://down ...

  6. #使用abp框架与vue一步一步写我是月老的小工具（2） 后台搭建初体验

    #使用abp框架与vue一步一步写我是月老的小工具(2) 后台搭建初体验 一.续上前言 关于这个小玩意的产品思考,假设我暂时把他叫我是月老热心人 这是一个没有中心的关系链,每个人进入以后都是以自己为中 ...

  7. 那些 JavaScript 自带的奇妙 Bug

    米娜桑,哦哈哟~ 本章讲解关于 JavaScript 奇妙的 Bug,与其说是Bug,不如说是语言本身隐藏的奥秘.接下来就看看可能会影响到我们编程的那些Bug吧. typeof null === &q ...

  8. Spring-cloud微服务实战【八】：API网关zuul

      在前面的文章中,我们先后使用了eureka/ribbon/feign/hystrix搭建了一个看似完美的微服务了,那是否还有值得继续优化的地方呢?答案肯定是有的,如果从整个微服务内部来看,基本已经 ...

  9. Linux/UNIX编程：获取指定用户所有正在运行的进程ID和进程名

    先用系统函数 `getpwnam` 获得指定用户名的 UID,然后遍历 /proc/ 中所有 PID 目录,如果 /proc/PID/status 中的 UID 是输入用户名对应的 UID 则输出该 ...

  10. 闲谈一下，ES3、ES4、ES5、ES6 分别是什么

    上图按照时间顺序说明了JavaScript.JScript和ECMAScript的发展. 显示在网景工作的Brendan Eich临危受命,用十天时间设计出LiveScript的第一个版本.临时发布前 ...