<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. EXT学习之——Ext下拉框绑定无效的问题

    1.保证store定义是否在combobox前面 2.有没写  .load 3.有没赋值  xxstore:xxstore 具体看详细步骤 http://www.cnblogs.com/wdw3121 ...

  2. Thinkphp源码分析系列–开篇

    目前国内比较流行的php框架由thinkphp,yii,Zend Framework,CodeIgniter等.一直觉得自己在php方面还是一个小学生,只会用别人的框架,自己也没有写过,当然不是自己不 ...

  3. SQL Server 之AdventureWorks 2008 安

    学习背景:<SQL Server 2008 编程入门经典> SQL Sever 版本 SQL Server 2008 R2 方法一: 1:AdventureWorks 2008 下载地址: ...

  4. 关于position:absolute的困惑

    今天在学习<精通css>时碰到一个问题,第六章“对列表应用样式和创建导航条”中的“Suckerfish下拉菜单”中,为了创建导航条的下拉菜单,文中提到的方法是:先设置下拉菜单的positi ...

  5. NRF51822之SPI

    /**@brief Function for initializing a SPI master driver. * * @param[in] p_instance Pointer to SPI ma ...

  6. {POJ}{树状数组}

    总结一下树状数组的题目: {POJ}{3928}{Ping Pong} 非常好的题目,要求寻找一个数组中满足A[i]<A[k]<A[j]的个数,其中i<k<j(或者相反).很巧 ...

  7. {Reship}{ListView}C# ListView用法详解

    ======================================================================== This aritcle came from http ...

  8. Multipart to single part feature

    Multipart to single part feature Explode Link: http://edndoc.esri.com/arcobjects/8.3/?URL=/arcobject ...

  9. hdu 3667 拆边加最小费用流

    Transportation Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)To ...

  10. C/ C++ 常见编程问题

    C 中容易忽略的问题 1.在C语言中,浮点型变量分为两类: a. 单精度型:类型说明符为float, 在Turbo C 中占4个字节(32位)内存空间,其数值范围为3.4E-38~3.4E+38,可提 ...