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 1108 FatMouse's Speed 基础dp

    FatMouse's Speed Time Limit: 2 Seconds      Memory Limit:65536 KB     Special Judge FatMouse believe ...

  2. hdu2073-2078

    hdu2073 数学 #include<stdio.h> #include<math.h> double len(double x){ )*(x+)); } int main( ...

  3. smarty中调用php内置函数

    http://blog.csdn.net/clevercode/article/details/50373633

  4. zstack（一）运行及开发环境搭建及说明(转载）

    本篇介绍zstack的部署环境,以及二次开发环境 运行环境 讲真,ZStack的安装做的还是不错的,提供多种安装模式,如离线安装.在线安装.一键安装.分布式安装等.安装的过程其实都很简单,当然这也是z ...

  5. Linux如何用yum安装软件或服务

    百度百科: Yum(全称为 Yellow dog Updater, Modified)是一个在Fedora和RedHat以及CentOS中的Shell前端软件包管理器.基于RPM包管理,能够从指定的服 ...

  6. linux I2C_client产生方法一

    \arch\arm\mach-omap2/board-am335xevm.c static struct i2c_board_info am335x_i2c2_boardinfo[] = { {  I ...

  7. MySQL索引分类和各自用途

    一. MySQL: 索引以B树格式保存 Memory存储引擎可以选择Hash或BTree索引,Hash索引只能用于=或<=>的等式比较. 1.普通索引:create index on Ta ...

  8. Rockchip parameter文件详解

    瑞芯微的安卓平台使用 parameter 文件来配置一些系统参数,比如定义串口号,固件版本,flash分区信息等. parameter 文件是由 BootLoader 解析的,大小不能超过 64 KB ...

  9. 远程连接linux服务器mysql

    今天遇到一个问题  无法远程链接mysql Host 'XXX' is not allowed to connect to this MySQL server 解决方案/如何开启MySQ先解决第一个提 ...

  10. python3+selenium3.13的简单操作

    1.浏览器 1.1 浏览器窗口大小位置 driver.set_window_size(self, width, height, windowHandle) 将某个窗口设置为固定大小 driver.se ...