<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. 【转】linux下skype的安装使用

    http://hi.baidu.com/24_jason/item/f85725306c7dbcf5df2221ca Fedora 18/17, CentOS/RHEL/SL 6.3 安装 Skype ...

  2. Visual Studio 2013新建工程导入现有代码文件夹并且保持目录结构

    本文提供了一个在Windows环境下使用Visual Studio 2013编辑现有源代码并且保持目录结构的方法.本文使用VS2013中文社区版做示例(本版本为免费版,可在VS官网下载),其他版本的V ...

  3. CentOS 问题集锦

    在CentOS 6更新后,不可避免的会在启动选项中产生多个内核选项,一个内核文件大概占100兆左右(一般100M以下),可以使用以下命令进行删除多余的内核. 1.首先列出系统中正在使用的内核: # u ...

  4. php关闭错误提示

    今天调试phalcon的一个接口时候碰到如下提示: Deprecated: mongogo::mongogo(): The Mongo class is deprecated, please use ...

  5. http的应用httpurlconnection--------1

    http请求后获得所需要的是字符串的时候 URL url=new URL(strurl); try { HttpURLConnection conn=(HttpURLConnection) url.o ...

  6. Python学习笔记（二）基本语法

    Class 2 一.交互式编程 交互式编程不需要创建脚本文件,是通过 Python 解释器的交互模式进来编写代码. linux上你只需要在命令行中输入 Python 命令即可启动交互式编程,如下图: ...

  7. 进阶篇：以IL为剑，直指async/await

    接上篇:30分钟?不需要,轻松读懂IL,这篇主要从IL入手来理解async/await的工作原理. 先简单介绍下async/await,这是.net 4.5引入的语法糖,配合Task使用可以非常优雅的 ...

  8. pcm跟.wav文件的关系

    PCM(Pulse Code Modulation----脉码调制录音).所谓PCM录音就是将声音等模拟信号变成符号化的脉冲列,再予以记录.PCM信号是由[1].[0]等符号构成的数字信号,而未经过任 ...

  9. 数据库数据怎样导出成Excle表格或Word文档？

    数据导出:将数据库的数据导出成Excel工作表或Word文档 方法:将一个泛型集合导出出去 主要使用: SaveFileDialog StreamWriter 导出代码: private void b ...

  10. C++中的预处理

    一.预处理的由来:      在C++的历史发展中,有很多的语言特征(特别是语言的晦涩之处)来自于C语言,预处理就是其中的一个.C++从C语言那里把C语言预处理器继承过来(C语言预处理器,被Bjarn ...