html： <div class="angle"></div>

css:

 .angle{

   width: 0px;

   height: 0px;

   border-bottom: 50px solid red;

   border-top: 50px solid transparent;

   border-left: 50px solid transparent;

   border-right: 50px solid transparent;

 }

效果：

css三角块的更多相关文章

  1. CSS三角的写法（兼容IE6）

    目录 简介 优点 原理 1. 先创建一个div 2. 然后给div设定边框. 3. 给div的四个边框都设置不同的颜色 4. 把宽度和高度都变成0 5. 其余角为透明 6. 兼容IE6浏览器 造成这样 ...

  2. css构造块级元素

    css 1. 宽高width:数值;height:数值;也可用百分比!长高的设置不会被后代继承2. 背景(1)背景颜色background-color:颜色值;元素的背景颜色默认为transparen ...

  3. 【27前端】在线css三角

    我们都知道利用css边框的属性可以画出三角形,这里为了方便,我做了一个简单的demo页面供大家使用. 在线css三角

  4. CSS包含块containing block详解

    “包含块(containing block)”,W3c中一个很重要的概念,今天带大家一起来好好研究下. 初步理解 在 CSS2.1 中,很多框的定位和尺寸的计算,都取决于一个矩形的边界,这个矩形,被称 ...

  5. css包含块containing block

    <css权威指南>P167: The Containing Block Every element is laid out with respect to its containing b ...

  6. CSS 各类 块级元素 行级元素 水平 垂直 居中问题

    元素的居中问题是每个初学者碰到的第一个大问题,在此我总结了下各种块级 行级 水平 垂直 的居中方法,并尽量给出代码实例. 首先请先明白块级元素和行级元素的区别 行级元素 一块级元素 1 水平居中: ( ...

  7. CSS基础选择器(选择器的优先级)，CSS样式块( 长度/颜色/显示方式/文本样式),盒模型组成，盒模型-block，盒模型布局

    CSS基础选择器 (1)id选择器:   #       =>  标签拥有 id="user"  属性 <style> #user { width: 200px; ...

  8. CSS的块级元素和内联元素的概念

    三生有幸,偶然之下知道了<CSS世界>这本书,让我产生了探究 CSS 的想法. 这里对 CSS 中的块级元素和内联元素的概念做一个简单的整理. 可能对于我们前端开发人员来讲,一般接触到的元 ...

  9. 学习总结：CSS(二)块级与行级元素特性、盒模型、层模型、BUG与BFC、浮动模型

    一.元素的块级与行级特性 在CSS属性display控制元素是否及如何显示的特性,常用的值有none.inline.block.inline-block,在CSS3中还有一些新的特性状态,在这里不做讨 ...

随机推荐

  1. NSValue 值

    前言 将任意数据类型包装成 OC 对象 1.比较两个 NSValue 类型数据的大小 NSValue *value1 = [NSValue valueWithPoint:NSMakePoint(10, ...

  2. NSRange 范围

    前言 结构体,这个结构体用来表示事物的一个范围,通常是字符串里的字符范围或者集合里的元素范围. typedef struct _NSRange { NSUInteger location; // 表示 ...

  3. jQuery定位导航滚动3

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. Cocos Creator 入门

    Cocos Createor 资源 略 场景 节点树 节点与组件 坐标系 脚本 组件声明,生命周期回调 var Component = cc.Class({ // 用于序列化,可省略 name: 's ...

  5. RESTful API概念解析

    什么是restful? REST与技术无关,代表的是一种软件架构风格,REST是Representational State Transfer的简称,中文翻译为“表征状态转移”或“表现层状态转化”. ...

  6. leecode刷题（5）-- 只出现一次的数字

    leecode刷题(5)-- 只出现一次的数字 只出现一次的数字 描述: 给定一个非空整数数组,除了某个元素只出现一次以外,其余每个元素均出现两次.找出那个只出现了一次的元素. 说明: 你的算法应该具 ...

  7. [51nod1236] 序列求和 V3（斐波那契数列）

    题面 传送门 题解 把求和的柿子用斐波那契数列的通项公式展开 \[ \begin{aligned} Ans &=\sum\limits_{i = 1}^{n} \left(\frac{(\fr ...

  8. cenos安装memcache

    注意事项: 1 安装时注意权限问题 sudo 2 需先启动memcache服务 php才能测试   Memcached是高性能的,分布式的内存对象缓存系统,用于在动态应用中减少数据库负载,提升访问速度 ...

  9. Unity小知识---第三人称中设置摄像机的简单跟随

    第三人称中设置摄像机的简单跟随 private Transform player; private Vector3 offect; private float smooothing = 3f; //插 ...

  10. 条目十《了解分配子(allocator)的约定和限制》

    条目十<了解分配子(allocator)的约定和限制> 在STL标准库中,分配子的存在有点怪异. 一开始的设计意图是提供一个内存模型的抽象,让使用库者库忽略操作系统的near指针和far指 ...