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. LG4768 [NOI2018]归程

    题意 题目背景 本题因为一些原因只能评测16组数据. 剩下的四组数据:https://www.luogu.org/problemnew/show/U31655 题目描述 本题的故事发生在魔力之都,在这 ...

  2. alpha和color key

    一.alpha 1.透明度,一般取值0-255 2.Alpha 通道:    Alpha 通道是为保存选择区域而专门设计的通道.在生成一个图像文件时,并不必须产生 Alpha 通道.通常它是由人们在图 ...

  3. 清理IE和使用历史痕迹

    清除IE临时文件的Batch脚本 @echo off title: IE temporary file deleter echo 正在 清除Internet临时文件 ............ RunD ...

  4. python之 利用字典与函数实现switch case功能

    Python不像C/C++,Java等有switch-case的语法.不过其这个功能,比如用Dictionary以及lambda匿名函数特性来替代实现. 字典+函数实现switch模式下的四则运算:( ...

  5. linux ping报错Name or service not known

    ubuntu设置静态ip以后忘记设置dns,ping的时候报错:Name or service not known 添加dns即可 vi /etc/resolv.conf nameserver 8.8 ...

  6. Servlet和JSP比较

    1. 两者哟许多相似之处,都可以生成动态网页 2. JSP的优点是擅长于网页制作,生成动态页面,比较直观. JSP的缺点是不容易跟踪与拍错 3. Servlet是纯Java语言,擅长流程处理和业务逻辑 ...

  7. Microsoft Dynamics CRM 4.0导入组织(Import Organization)时间过长的原因总结

    952934    How to move the Microsoft Dynamics CRM 4.0 deployment http://support.microsoft.com/default ...

  8. C#设计模式之：抽象工厂模式与反射

    抽象工厂模式[实例]:定义一个用于创建对象的接口,让子类决定实例化哪一个类 UML 代码class User{    private int _id;    public int Id { get = ...

  9. JS怎么把字符串数组转换成整型数组

    今天在学习highcharts时,遇到了一个把字符串数组转换为整形数组的问题,拿在这里讨论一下: 比如有一个字符串: var dataStr="1,2,3,4,5"; 现在需要把它 ...

  10. WPF Demo4

    <Window x:Class="Demo4.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/ ...