<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>list</title>

</head>

<style>

    .top{

        width:0;

        height:0;

        border-width:0 30px 30px;

        border-style:solid;

        border-color:transparent transparent #333;/*透明 透明  灰*/

        margin:40px auto;

        position:relative;

    }

    .down{

         width:0;

        height:0;

        border-width:30px 30px 0;

        border-style:solid;

        border-color:#333 transparent transparent;/*灰 透明 透明 */

        margin:40px auto;

        position:relative;

    }

    .left{

        width:0;

        height:0;

        border-width:30px 30px 30px 0;

        border-style:solid;

        border-color:transparent #333 transparent transparent;/*透明 灰 透明 透明 */

        margin:40px auto;

        position:relative;

    }

    .right{

         width:0;

        height:0;

        border-width:30px 0 30px 30px;

        border-style:solid;

        border-color:transparent transparent transparent #333;/*透明 透明 透明 灰*/

        margin:40px auto;

        position:relative;

    }

</style>

<body>

    <div class="">

        <div class="top">

        </div>

        <div class="down">

        </div>

        <div class="left">

        </div>

        <div class="right">

        </div>

    </div>

</body>

</html>

CSS绘制小三角的更多相关文章

  1. css实现小三角（原理）

    效果图如图1所示:(简单示范,有点丑,莫介意) PS:兼容IE,FF , chrome ,360安全浏览器 先讲下原理吧,如图2所示: 这个div的样式如下所示: div{ width: 0px; h ...

  2. css制作小三角

    视觉稿中经常有些小三角,如下图.每次用图片做太不方便了,我们看看用css实现的效果(支持ie6,7哦) <style> /*border实现三角*/ /*箭头向上*/ .arrow-top ...

  3. CSS的小三角

    上三角▲ width: 0; height: 0; line-height: 0; font-size: 0; border-width: 10px; border-style: solid; bor ...

  4. 用CSS制作小三角提示符号

    今天在项目中遇到了如下图的切图要求. 对,重点就是那个小三角提示符号. html 结构如下 <div class="wrap"> <div class=" ...

  5. CSS实现小三角小技巧

    <style> .box{ width: 20px; height: 20px; background-color: #424; border: 10px solid #9C27B0; b ...

  6. CSS生成小三角

    前言:小三角的应用场景:鼠标移动到某个按钮上面,查看信息详情时,信息详情弹出框有时候会需要一个小三角. 代码如下: <div id='triangle'></div> #tri ...

  7. 纯css制作小三角

    在网站制作的过程中常涉及一些小图标,以前大部分会采用小图片.但有了css3后很多变得方便了,比如要在li列表的每行文字的前面加个小三角,可以这么写: <!DOCTYPE html> < ...

  8. css的小三角实现的方式

    先上一个简单的例子哈: 此时的方向向下. 如果想方向向上的话用:border-top:0;border-bottom:4px solid; 1. width:0 height:0 border宽度,颜 ...

  9. css 兼容小三角

    <!DOCTYPE><html ><head><meta http-equiv="Content-Type" content=" ...

随机推荐

  1. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 图片：图片响应式 (将很好地扩展到父元素)

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  2. 用 Heapster 监控集群【转】

    Heapster 是 Kubernetes 原生的集群监控方案.Heapster 以 Pod 的形式运行,它会自动发现集群节点.从节点上的 Kubelet 获取监控数据.Kubelet 则是从节点上的 ...

  3. 8051单片机中访问int中字节的方法

    在使用单片机中,unsigned int 占2个字节,unsigned char 占一个字节.而单片机是实行的字节寻址.16字节的bit寻址实在是不好用, 不好用在不能建数组. 在实际的开发过程中,要 ...

  4. 用 Python 编写一个天气查询应用

    效果预览: 一.获取天气信息 使用python获取天气有两种方式. 1)是通过爬虫的方式获取天气预报网站的HTML页面,然后使用xpath或者bs4解析HTML界面的内容. 2)另一种方式是根据天气预 ...

  5. Spring AOP 管理事务

    <aop:config proxy-target-class="true"> <aop:pointcut expression="execution(* ...

  6. Angular2的双向数据绑定

    什么是双向绑定 如图:   双向绑定.jpg 双向绑定机制维护了页面(View)与数据(Data)的一致性.如今,MVVM已经是前段流行框架必不可少的一部分. Angular2中的双向绑定 双向绑定, ...

  7. UVA - 816 Abbott's Revenge（bfs）

    题意:迷宫从起点走到终点,进入某点的朝向不同,可以出去的方向也不同,输出最短路. 分析:因为朝向决定接下来在该点可以往哪里走,所以每个点需要有三个信息:x,y,d(坐标和进入该点的朝向),所以将起点的 ...

  8. tomcat端口号被占用，且杀进程不能够杀掉解决办法

    在电脑上安装了zookeeper以后,配置好tomcat启动发现端口号8009端口号被占用,报错如下: 采用netstat –ano 查询所有进程查看或者根据端口号查进程netstat -ano |f ...

  9. tensorflow学习笔记--dataset使用，创建自己的数据集

    数据读入需求 我们在训练模型参数时想要从训练数据集中一次取出一小批数据(比如50条.100条)做梯度下降,不断地分批取出数据直到损失函数基本不再减小并且在训练集上的正确率足够高,取出的n条数据还要是预 ...

  10. 2-Java基本数据类型和运算符

    目录 Java基本类型 Java数据类型转换 Java运算符 1.Java基本类型 1.1.boolean布尔 - 只有true和false两种值,在内存中占1bits(位),默认是false 1.2 ...