<!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. Verilog 2001 `default_nettype none

    在Verilog 1995規定,對於沒宣告的信號會自動視為wire,這樣常常造成debug的困難,Verilog 2001另外定義了`default_nettype none,將不再自動產生wire. ...

  2. 023、Java中String的用法

    01.代码如下: package TIANPAN; /** * 此处为文档注释 * * @author 田攀 微信382477247 */ public class TestDemo { public ...

  3. B. Misha and Changing Handles

    B. Misha and Changing Handles time limit per test 1 second memory limit per test 256 megabytes input ...

  4. Linux每日练习-awk命令之内部自定义函数 20200224

  5. FC 与 FB 与 OB 的区别，时间标记冲突与一致性检查 有详细的步骤

    关键字1 组织块的程序是由用户自己编写. 关键字2 时间标记冲突与一致性检查 有详细的步骤. 关键字3 FC 与 FB 与 OB 的区别?   (一)功能 功能块 区别 ? FB 和FC均为 用户编写 ...

  6. 我为NET狂官方面试题-数据库篇答案(转)

    题目:http://www.cnblogs.com/dunitian/p/6028838.html 汇总:http://www.cnblogs.com/dunitian/p/5977425.html ...

  7. Biu一Biu--GDB

    gcc常见编译选项 ** -c **:只激活预处理.编译和汇编,也就是生成obj文件 ** -S **:只激活处理和编译,把文件编译成汇编代码 ** -o **:定制目标名称,缺省的时候编译出来的可执 ...

  8. 对plotTree的解释

    1.>>>a = 1/2/2   >>>a >>>0.25 2.def plotMidText(cntrPt,parentPt,txtString ...

  9. Mysql 事务隔离级别分析

    Mysql默认事务隔离级别是:REPEATABLE-READ --查询当前会话事务隔离级别mysql> select @@tx_isolation; +-----------------+ | ...

  10. SPOJ ANARC05H 计数DP

    给定一个数字串,问有多少种拆分方法,题目所谓的拆分,就是分成若干个子块,每个块的和 即为各个数字相加,当前块的和一定要小于等于后面的块的和 比如1117  就有这些[1-117], [1-1-17], ...