<html>
<head>
<meta charset="UTF-8">
</head>
<style>
div{float:left;margin:0 40px;}
#div1{
width:0;
height:0;
border-top:40px solid black;
border-left:40px solid transparent;
border-right:40px solid transparent;

}

#div2{
width:0;
height:0;
border-left:40px solid red;
border-top:40px solid transparent;
border-bottom:40px solid transparent;
}

#div3{
width:0;
height:0;
border-bottom:40px solid blue;
border-left:40px solid transparent;
border-right:40px solid transparent;
}

#div4{
width:0;
height:0;
border-right:40px solid green;
border-top:40px solid transparent;
border-bottom:40px solid transparent;
}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
</body>
</html>

css三角形的更多相关文章

  1. 前端读者 | CSS三角形和饼图

    @羯瑞 三角形 .triangle{width:0;height:0;border-width:50px;border-style:solid;border-color:red blue green ...

  2. css三角形的实现

    实底三角形: <html> <head> <title></title> <style type="text/css"> ...

  3. [CSS]三角形

    CSS盒子模型 当我们把padding和width,height全部设置为0,border设为一个较大的像素时 即:我们需要什么方向的三角形,只需把其余的三角形背景色设置为transparent:

  4. CSS三角形广告文字

    街上经常碰到一些发各类广告传单的,有一次收到一张房地产广告的传单,顺手留下来,看着里面有些广告挺吸引人,同时也想练练自己css技术,故抽空做了一下. 原图某区域如下: 实现上图效果是需要一些想象力的, ...

  5. 纯css三角形

    三角形原理: 盒子c内容width为0,height为0,盒子给一定宽度的border,分别为四边的border设置不同的颜色,则可以得到不同样式的三角形举个简单的栗子:CSS代码 .box1{ wi ...

  6. [HTML/CSS]三角形

    CSS盒子模型 当我们把padding和width,height全部设置为0,border设为一个较大的像素时 即:我们需要什么方向的三角形,只需把其余的三角形背景色设置为transparent:

  7. css三角形实现的几种方法的区别

    演变: .triangle{ height: 30px; width: 30px; display: inline-block; border: 30px solid; border-color: # ...

  8. css 三角形空心三角形的简单实现

    <style> #talkbubble { width: 120px; height: 80px; position: relative; -moz-border-radius: 10px ...

  9. CSS三角形的实现原理及运用

    原理 css盒模型 一个盒子包括: margin+border+padding+content– 上下左右边框交界处出呈现平滑的斜线. 利用这个特点, 通过设置不同的上下左右边框宽度或者颜色可以得到小 ...

  10. CSS三角形/气泡的实现原理及应用

    记得第一次面试,面试官问如何用css实现一个不规则三角形?好叭 ·-·,触及到知识盲区了,手动叹气(╥﹏╥),好在别的回答的还好,没挂

随机推荐

  1. C#中的 正则表达式

    String 类包括许多字符串搜索和替换方法,当你要在较大字符串中定位文本字符串时,可以使用这些方法. 当你希望在较大字符串中定位若干子字符串之一时,或者当你希望在字符串中标识模式时,正则表达式最有用 ...

  2. Contos7 装bcm4312无线网卡驱动

    本次装网卡比较的无语,报错网上竟然找不到答案,误打误撞给装好了,做下记录以后可能会用的上. 首先去官网下载网卡驱动:http://www.broadcom.com/support/802.11 我系统 ...

  3. Java中的字符串常量池

    ava中字符串对象创建有两种形式,一种为字面量形式,如String str = "droid";,另一种就是使用new这种标准的构造对象的方法,如String str = new ...

  4. JavaScript 对象 之继承对象 学习笔记

    假设,我们有个这样的需求: 两个种族,每个种族都有 名字.血量(默认200).行为(行为有 跳跃.移动速度 这些属性)等共有属性. 人族能量值比兽人多10%,兽人血量比人族多10%. 职业有战士和法师 ...

  5. MAT内存问题分析定位

    MAT内存问题分析定位 1.下载安装MemoryAnalyzer工具. 2.使用DDMS将对应线程的内存日志导出来后,使用hprof-conv工具进行转换,用MAT打开转换后的hprof文件.

  6. XML团队介绍发布！

    三个臭皮匠,赛过诸葛亮 /********************************************************************/ 成员: 姓名:项浩哲 职务:项目经 ...

  7. [转载]Altium规则详解及设置

    在Altium中进行PCB的设计时,经常会使用规则(Rule)来进行限定以确定线宽孔径等参数,此文将简要的介绍规则中的一些标量代表了什么. Electrical——电气规则.安全间距,线网连接等 Ro ...

  8. CSS3样式问题

    empty-cells 属性设置是否显示表格中的空单元格 tr:nth-child(even)偶数行的表格 li:nth-child(20)指定位置 2016-09-2813:23:45

  9. node.js 基础学习笔记1

    1. node -v 查看版本 node -e --js代码 node --进入编辑模式 Ctrl+C 退出编译模式 var http=require('http') http.createServe ...

  10. java多线程学习-开篇

    1.Java线程基本概念 在操作系统中两个比较容易混淆的概念是进程(process)和线程(thread).操作系统中的进程是资源的组织单位.进程有一个包含了程序内容和数据的地址空间,以及其它的资源, ...