用css实现三角形
 

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style type="text/css">

        * {

            margin: 0;

            padding: 0;

        }

        #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="box"></div>

</body>

</html>

　　

06. 用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 的小三角,你会怎么办? 切个图上去?恩,不错,简单,兼容性也一级棒,不但好控制,那点小东西也增加不了多少图片的大小.但有没有更好更讲究技巧的办法呢?哈哈,那必须有啊,而且还不 ...

随机推荐

  1. JDK1.6 1.7 1.8 多版本windows安装 执行命令java -version 版本不变的问题

    现在Windows的java安装已经没有解压版本,Oracle官方也不会再提供了,只有安装程序 所以每当安装一次JDK,都会将 java.exe.javaw.exe.javaws.exe三个可执行文件 ...

  2. Insufficient free space for journal files

    前两天请假了,公司的很多app突然挂掉了,说是mongodb莫名的挂掉了,赶紧进去看了看日志: --31T14:: [initandlisten] ERROR: Insufficient free s ...

  3. 设计模式（java）--简单工厂模式之女娲造人.水果农场

    女娲抟土造人 话说:“天地开辟,未有人民,女娲抟土为人.”女娲需要用土造出一个个的人,但在女娲造出人之前,人的概念只存在于女娲的思想里面. 女娲造人,这就是简单工厂模式的应用.  首先,在这个造人的思 ...

  4. TF Boys (TensorFlow Boys ) 养成记（五）： CIFAR10 Model 和 TensorFlow 的四种交叉熵介绍

    有了数据,有了网络结构,下面我们就来写 cifar10 的代码. 首先处理输入,在 /home/your_name/TensorFlow/cifar10/ 下建立 cifar10_input.py,输 ...

  5. bootstrap实现去点列表、内联列表、水平定义列表

    内联列表:通过添加类名“.list-inline”来实现内联列表,简单点说就是把垂直列表换成水平列表,而且去掉项目符号(编号),保持水平显示. 去点列表:通过给无序列表添加一个类名“.list-uns ...

  6. C++11新特性之auto

    auto的使用  c++11引入了auto类型说明符,auto让编译器通过初始值来推算变量的类型,所以auto定义的变量必须有初始值.  使用auto也能在一条语句中声明多个变量,因为一条声明语句只能 ...

  7. mybatis之generator生成代码

    首先在pom文件中引入以下代码 <plugin> <groupId>org.mybatis.generator</groupId> <artifactId&g ...

  8. Java锁---偏向锁、轻量级锁、自旋锁、重量级锁

    之前做过一个测试,反复执行过多次,发现结果是一样的: 1. 单线程下synchronized效率最高(当时感觉它的效率应该是最差才对): 2. AtomicInteger效率最不稳定,不同并发情况下表 ...

  9. sqpark编译时maven的pom文件内容（org.apachetype.maven.apachetypes:maven.archetypequickstat）

    <?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://mave ...

  10. 【装饰者模式】Decorator Pattern

    装饰者模式,这个模式说我一直记忆深刻的模式,因为Java的IO,我以前总觉得Java的IO是一个类爆炸,自从明白了装饰者模式,Java的IO体系让我觉得非常的可爱,我们现在看看什么是装饰者,然后再来看 ...