<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 多个python版本的切换

    源码安装新的python版本,我的安装路径: /usr/self/Python3.5.2 修改软链接到你所安装的python版本中: 默认python命令是在/usr/bin/目录下 1 sudo m ...

  2. 【JavaScript】前端插件

    树形结构: http://www.jeasyui.com/documentation/index.php 网上有对这个插件的说明,总的来说这个插件将selected和checked作为两种状态: 1. ...

  3. css仅在指定ie浏览器生效

    css中判断IE版本的语句<!--[if gte IE 6]> Only IE 6/+ <![endif]-->: 1. <!--[if !IE]> 除IE外都可识 ...

  4. IRunningObjectTable接口

    IRunningObjectTable接口

  5. IMoniker接口的MKParseDisplayName和 GetDisplayName的注意事项

    IMoniker接口的MKParseDisplayName和 GetDisplayName的注意事项  

  6. win7的svchost.exe占用内存过高如何解决

    方法/步骤 1 在我的电脑上点击鼠标右键,选择[管理] 步骤阅读 2 选择右侧[服务和应用程序]下的[服务]选项 步骤阅读 3 找到名称我Superfetch的服务,双击鼠标左键. 步骤阅读 4 选择 ...

  7. [INS-32025] 所选安装与指定 Oracle 主目录中已安装的软件冲突

    windows server 2008 r2 enterprise下的解决办法为:删除C:\Program Files (x86)\Oracle\Inventory\ContentsXML目录下的in ...

  8. APK动态加载框架（DL）解析

    转载请注明出处:http://blog.csdn.net/singwhatiwanna/article/details/39937639 (来自singwhatiwanna的csdn博客) 前言 好久 ...

  9. LoadRunner常见问题整理

      1  LoadRunner录制脚本时为什么不弹出IE浏览器? 当一台主机上安装多个浏览器时,LoadRunner录制脚本经常遇到不能打开浏览器的情况,可以用下面的方法来解决. 启动浏览器,打开In ...

  10. python第十二天-----RabbitMQ

    有一位小伙伴说让我去A站写博客可能会有很多人喜欢,真是搞不懂,北方哪里有卖萌?北方默认状态就是这么萌的!再者说了,这明明就是很专注于技术的博客嘛,能不能严肃点!知不知道什么叫帧? 学习到了数据库的相关 ...