<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. [转载]：经纬度与WGS84坐标转换

    本代码实现在WGS84系统的大地坐标(BLH)和空间直角坐标(XYZ)的互相转换,符合标准语法,可直接使用 如下代码,输出为: WGS84:  -2175790.73969891    4461032 ...

  2. Egret中的对象池ObjectPool

    为了可以让对象复用,防止大量重复创建对象,导致资源浪费,使用对象池来管理. 对象池具体含义作用,自行百度. 一 对象池A 二 对象池B 三 字符串key和对象key的效率 一 对象池A /** * 对 ...

  3. 通过Percona XtraBackup添加一个slave

    假设我的master是172.16.15.8,要添加的slave是172.16.15.9 1:在主服务器执行备份操作(172.16.15.8) /usr/bin/innobackupex --comp ...

  4. 样式link属性media用法--媒体类型查询

    引用外部样式使用link 你可能想针对将要显示页面的设备类型(桌面PC.笔记本电脑.平板电脑.手机或者甚至页面的印刷版本)来调整页面的样式,可以利用一个media属性, 在<link>元素 ...

  5. Ajax readystate 5种状态

    Status 说明 0(Uninitialized) XMLHttpRequest 对象已经创建,但没调用 open 方法. 1(Loading) 调用 open 方法,但没调用 send 方法.(尚 ...

  6. POJ 3348 - Cows 凸包面积

    求凸包面积.求结果后不用加绝对值,这是BBS()排序决定的. //Ps 熟练了template <class T>之后用起来真心方便= = //POJ 3348 //凸包面积 //1A 2 ...

  7. css3的一些新属性1

    <body> /*文本阴影*/ <h1 style="text-shaow:5px 5px 5px #C0F">我爱你</h1> </bo ...

  8. git 一般的使用操作

    1.先在github上建立自己的repository,取名为yourRepo 2.创建本地库 ssh -T git@github.com # 在初始化版本库之前,先要确认认证的公钥是否正确 git i ...

  9. tp 中关于大小写的问题

    ThinkPHP3.2.3升级的若干问题和注意事项(持续更新) 现把ThinkPHP3.2.2在升级到3.2.3的过程中需要注意和可能的问题整理如下: (无论如何,在升级之前请确认备份) 1.首先3. ...

  10. C#签名 NX90

    1.在VS中添加D:\Siemens\NX90\ \NXSigningResource.res文件,右击文件属性,将资源变为 嵌入式资源,即生成方式 2.编译生成exe文件或者dll文件,例如:xxx ...