1.效果：

2.代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style type="text/css">

        * {

            margin: 0;

            padding: 0;

        }

        #bo {

            /* 如果将宽高设为0，就可以形成一个有四个三角形的正方形 */

            width: 100px;

            height: 100px;

            /* transparent：透明的 */

            border: 100px solid transparent;

            border-top-color: deeppink;

            border-left-color: red;

            border-right-color: blue;

            border-bottom-color: black;

        }

        #box {

            width: 0px;

            height: 0px;

            border: 100px solid transparent;

            border-top-color: deeppink;

            border-left-color: deeppink;

            /*border-right-color: deeppink;*/

            /*border-bottom-color: deeppink;*/

        }

    </style>

</head>

<body>

<div id="bo"></div>

<br/>

<div id="box"></div>

</body>

</html>

7.css实现三角形的更多相关文章

  1. CSS制作三角形和按钮

    CSS制作三角形和按钮 用上一篇博文中关于边框样式的知识点,能制作出三角形和按钮. 我先说如何制作三角形吧,相信大家在平时逛网站的时候都会看到一些导航栏中的三角形吧,比如说: 网易首页的头部菜单栏中, ...

  2. CSS 魔法系列：纯 CSS 绘制三角形（各种角度）

    我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...

  3. CSS 制作三角形原理剖析

    使用css制作三角形其实原理很简单,下面一步步解析. 1.html代码如下 <div class="triangle"> </div> 2.CSS代码 .t ...

  4. CSS实现三角形

    突然想起搞一把三角形. 简单来说: 建一个div  宽度.高度设为0 添加两个样式: border 和 border-color 如果需要一个三角形把其他边框都设为透明 transparent < ...

  5. css绘制三角形原理

    1.新建一个元素,将它的宽高都设置为0:然后通过设置border属性来实现三角形效果,下面是css绘制三角形的原理: <!DOCTYPE html> <html> <he ...

  6. 纯CSS写三角形-border法

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

  7. 经典CSS实现三角形图标原理解析

    前言: 在写这篇文章之前,我也看过很多前端大神写的代码,But,都只是粘贴代码和给出显示效果,对于初学者来说大家都喜欢刨根问底,为什么要这样做呢? 接下来就让我给大家分享一下我对CSS实现三角形的理解 ...

  8. 用css制作三角形

    用css制作三角形,主要是利用css元素给“盒模型”设置边框得到的. 上图,上边框和做边框,以及上边框和右边框的交合处,浏览器会按照直角的二分之一处绘制交合线.这是“盒模型”有宽和高时候的效果.我们假 ...

  9. 三种纯CSS实现三角形的方法

    看到像上图这样的 tip 的小三角,你会怎么办? 切个图上去?恩,不错,简单,兼容性也一级棒,不但好控制,那点小东西也增加不了多少图片的大小.但有没有更好更讲究技巧的办法呢?哈哈,那必须有啊,而且还不 ...

  10. CSS画三角形引发的一些思考

      今天刷知乎时看到了一个问题,有谁能详细讲一下css如何画出一个三角形?怎么想都想不懂? - 知乎.很巧,刚入前端坑的我前不久也遇到过这个问题,今天再来谈一谈这个问题则是因为知乎的一些答案引发了我的 ...

随机推荐

  1. ZOJ 3432 Find the Lost Sock （异或的运用）

    Alice bought a lot of pairs of socks yesterday. But when she went home, she found that she has lost ...

  2. atitit.加入win 系统服务 bat批处理程序服务的法总结instsrv srvany java linux

    atitit.加入win 系统服务 bat批处理程序服务的法总结instsrv srvany  java linux 系统服务不同于普通视窗系统应用程式.不可能简简单单地通过执行一个EXE就启动视窗系 ...

  3. win7上搭建Android环境及调试

    工欲善其事必先利其器,好记性不如烂笔头.要学习一门新的语言,首先必须得先搭环境,否则没法实践.如果之前按照网上的提示,搭建过环境,而且环境比较复杂的话,我相信隔很长一段时间后,就会忘记,到真正用的时候 ...

  4. Eolinker API 接口文档神器

    Eolinker API 接口文档神器 群里小伙伴推荐的,还没有去研究,先记下来. API文档管理.自动化测试.开发协作利器 正在为数万企业管理超过100万APIs,提高开发效率以及规范开发流程

  5. ThinkPHP 5 insertall 只插入最后一条数据的问题

    问题来源: Steed 2018/1/5 11:30:25 @流年 我用fetchsql查看的sql,发现数据都是最后一条 Steed 2018/1/5 11:30:39 我也不知道是什么问题,我打印 ...

  6. VS2010编译和运行项目错误

    打开工程提示如下: The 'Microsoft.Data.Entity.Design.BootstrapPackage.BootstrapPackage, Microsoft.Data.Entity ...

  7. View绘制基本知识点

    !通过阅读Android开发艺术探索整理   底层工作原理:测量流程.布局流程.绘制流程   常见回调方法:构造方法 onAttach onVisiblityChanged onDetach   Vi ...

  8. 异步FIFO跨时钟域亚稳态如何解决？

    跨时钟域的问题:前一篇已经提到要通过比较读写指针来判断产生读空和写满信号,但是读指针是属于读时钟域的,写指针是属于写时钟域的,而异步FIFO的读写时钟域不同,是异步的,要是将读时钟域的读指针与写时钟域 ...

  9. zabbix监控进程的CPU和内存占用量，进程数量

    由于需要对公司特定服务进行监控,于是,通过编写脚本获取各个进程占用系统资源的信息,从而使用zabbix采集到这些数据进行特定进程的基础监控. 我这主要需要监控的程序如下: nginx redis my ...

  10. 关于启动tomcatINFO警告错误问题解决

    关于启动tomcatINFO警告错误问题解决: #apr 与 tomcat-native 提供更好的伸缩性.性能和集成到本地服务器技术.如果没有apr技术,启动tomcat 时出现如下提示:INFO: ...