<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. jQuery triger与trigerHandler的区别

    trigger(event, [data]) 与 triggerHandler(event, [data]) 都是用于触发一个事件. 其两者的区别在于,如果触发的事件是有浏览器默认行为的,trigge ...

  2. oracle 做算法 数据为空时，默认为0

    SELECT NVL('',0) FROM DUAL 获取当前日期: SELECT SYSDATE FROM DUAL 当前日期-某个日期差的天数 SELECT  TO_NUMBER(SYSDATE  ...

  3. C#算法之向一个集合中插入随机不重复的100个数

    一道非常经典的C#笔试题: 需求:请使用C#将一个长度为100的int数组,插入1-100的随机数,不能重复,要求遍历次数最少. 1.最简单的办法 var rd = new Random(); Lis ...

  4. html如何绑定radio控件和label控件

    只要指定label的"for"属性到radio的id就行,或者用label标签包围住radio. 第一种方式: <input type="radio" i ...

  5. HTML5基础

    一.HTML(超文本标记语言) 1>就是文本,由浏览器负责将它解析成具体的网页内容 2>由N个标签(节点.元素.标记)组成 二.常见HTML标签 1>标题标签:h1.h2.h3.h4 ...

  6. mysql 更改自动增长字段值的重新设定

    今天在服务器上MYSQL库里的一个表插入数据,主键id是auto_increment自动增长类型的.发现插入的值从2247734开始,而实际上id的最大值才22722,不明原因. 删除了新增的,opt ...

  7. ide编辑器

    http://wowubuntu.com/markdown/#editor https://netbeans.org/downloads/start.html?platform=windows& ...

  8. 禅道Linux一键安装版

    禅道Linux一键安装版 Linux一键安装包内置了apache, php, mysql这些应用程序,只需要下载解压缩即可运行禅道.从7.3版本开始,linux一键安装包分为32位和64位两个包,大家 ...

  9. (null): Linker command failed with exit code 1 (use -v to see invocation)

    他山之石,可以攻玉. 感谢热心网友. 此处有更佳的分析:http://www.cnblogs.com/xiaoyouPrince/p/5260378.html

  10. android 编译错误 com/android/dx/command/dexer/Main : Unsupported major.minor version 52.0

    解决方案一: JDK版本不一致造成的,指的是高版本的JDK编译的class不能放在低版本的JDK上运行. 如果是Version 52,就表示JDK8编译的class不能运行在JDK7上,所以需要在本地 ...