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. 51Nod：1086背包问题 V2

    1086 背包问题 V2 基准时间限制:1 秒 空间限制:131072 KB 分值: 40 难度:4级算法题 有N种物品,每种物品的数量为C1,C2......Cn.从中任选若干件放在容量为W的背包里 ...

  2. 51Nod：1085 背包问题

    1085 背包问题  基准时间限制:1 秒 空间限制:131072 KB 分值: 0 难度:基础题  收藏  关注 在N件物品取出若干件放在容量为W的背包里,每件物品的体积为W1,W2--Wn(Wi为 ...

  3. hdu1176 dp

    题意:在一条 0 ~ 10 的坐标轴上,在整数点上会掉烙饼,一个人第 0 秒站在坐标 5 处,每秒他能够左右移动一个单位的坐标或不移动,并接住该坐标位置当前时间落下的烙饼,(例如第0秒他在坐标5处,第 ...

  4. test20181004 排列

    题意 分析 容斥公式的意义 选了原图中\(x(x \geq i)\)条边的方案,重复了\(\binom{x}{i}\)次. 有多加多减,所以就是那个式子. 具体而言,对选了x条原图中的边的方案,总共加 ...

  5. day43 数据库知识欠缺的

    一 什么是存储引擎 mysql中建立的库===>文件夹 库中建立的表===>文件 现实生活中我们用来存储数据的文件有不同的类型,每种文件类型对应各自不同的处理机制:比如处理文本用txt类型 ...

  6. 用vmware安装gho文件心得

    在卡饭学到了不少知识,下面是我的一个心得分享,希望大家能用的上. 用vmware安装gho文件心得 方法1:diskgenius+ghostexp用vm新建一个空白硬盘虚拟机, 记住虚拟机文件的存储位 ...

  7. My Router

    新路由 型号:Y1 CPU:单核 链接终端:2 路由系统版本:1.6.6.171.6.9.17 运行时长:0天0小时17分13秒 MAC地址:20:76:93:28:CA:24   LAN口状态 MA ...

  8. 【转】每天一个linux命令（41）：ps命令

    原文网址:http://www.cnblogs.com/peida/archive/2012/12/19/2824418.html Linux中的ps命令是Process Status的缩写.ps命令 ...

  9. 数独求解程序 php版

    数独求解程序 php版 <?php class Sudoku { var $matrix; function __construct($arr = null) { if ($arr == nul ...

  10. Django的 admin管理工具

    admin组件使用 Django 提供了基于 web 的管理工具. Django 自动管理工具是 django.contrib 的一部分.你可以在项目的 settings.py 中的 INSTALLE ...