<!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. SciPy 安装

    章节 SciPy 介绍 SciPy 安装 SciPy 基础功能 SciPy 特殊函数 SciPy k均值聚类 SciPy 常量 SciPy fftpack(傅里叶变换) SciPy 积分 SciPy ...

  2. An attempt was made to call the method com.google.gson.GsonBuilder.setLenient()Lcom/google/gson/GsonBuilder; but it does not exist. Its class, com.google.gson.GsonBuilder, is available from the foll

    SLF4J: Class path contains multiple SLF4J bindings. SLF4J: Found binding in [jar:file:/G:/sharp/repo ...

  3. 基于LAMP实现后台活动发布和前端扫码签到系统

    目的 无论是公司.学校和社会团体,都会举办各式各样的活动,比如运动会.部门会议.项目会议.野炊.团建等.作为团队管理者来讲,当然希望能够把这类活动转移到线上形成完整的系统,类似于电子流的形式.本文以学 ...

  4. JAVA基础-反射机制

    什么是JAVA的反射机制 Java反射是Java被视为动态(或准动态)语言的一个关键性质.这个机制允许程序在运行时透过Reflection APIs取得任何一个已知名称的class的内部信息,包括其 ...

  5. leetCode242 有效的字母异位词

    引言: 给定两个字符串 s 和 t ,编写一个函数来判断 t 是否是 s 的字母异位词. 示例 1: 输入: s = "anagram", t = "nagaram&qu ...

  6. 025、MySQL字符串大小写转化函数，文本转化大写，文本转化小写

    #变大写 SELECT UPPER('abcdABCD123a'); #ABCDABCD123A SELECT UCASE('abcdABCD123a'); #ABCDABCD123A #变小写 SE ...

  7. ZOJ 3802 Easy 2048 Again 状态DP

    zoj 上次的月赛题,相当牛的题目啊,根本想不到是状态压缩好吧 有个预先要知道的,即500个16相加那也是不会超过8192,即,合并最多合并到4096,只有2的12次方 所以用状态压缩表示前面有的序列 ...

  8. json字符串转java对象，json中字段名称与对象属性名称不一致

    json字符串转java对象,json字段名称与对象属性名称不一致可以在对象属性上添加注解@SerializedName解决

  9. Web服务器：Apache的安装使用

    Apache我们很熟悉,已经用了不短时间的tomcat就是apache公司开发的,那么这款以公司命名的所谓的Web服务器Apache,又到底什么呢? 一.概念 Apache是一个静态的Web服务器,是 ...

  10. Golang的运算符-逻辑运算符

    Golang的运算符-逻辑运算符 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.逻辑运算符概述 !: 非运算符,表示NOT(有种取反的意思),如"!ture" ...