<!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. jmeter断言之响应code：200

    因为Jmeter只要检测到网页的响应,就认为是Pass而并不管当前网页内容的正确性．在进行压力测试时,为了检查Web服务器返回的网页是否正确,我们可以设置断言,这些断言是验证网页上是否存在指定的Tex ...

  2. NO21 Llinux的文件种类与扩展名--文件权限--软硬链接--Linux删除文件原理

    Linux的文件种类与扩展名 一.文件种类:1.普通文件(regular file)第一个字符为[ - ]包括:①纯文本档(ASCII):这是Linux系统中最多的一种文件类型,称为纯文本档.是因为内 ...

  3. Bar Chart _Study

    ---恢复内容开始--- 以“3D BarChart”为例. 1.Select a theme.(选择一个主题模板) 2.Set up categories and groups.(设置类型和组) 3 ...

  4. Day7 - E - Strange Way to Express Integers POJ - 2891

    Elina is reading a book written by Rujia Liu, which introduces a strange way to express non-negative ...

  5. JSONPath 表达式的使用

    一.JSONPath使用需要的包 <dependency> <groupId>com.jayway.jsonpath</groupId> <artifactI ...

  6. 001.Oracle数据库 , 查询日期在两者之间

    /*Oracle数据库查询日期在两者之间*/ SELECT OCCUR_DATE FROM LM_FAULT WHERE ( ( OCCUR_DATE >= to_date( '2017-05- ...

  7. 从MSSQL表中删除重复项

    declare @ids int=1 declare @count int while @ids<471 begin select @count=COUNT(*) From LotNO wher ...

  8. net Core3.1 Swagger加JWT权限

    1.Swagger中开启JWT服务 #region swagger services.AddSwaggerGen(c => { c.SwaggerDoc("v1", new ...

  9. JAVA实现数组的反转--基础

    直接上代码 这个算法比较简单,唯一需要注意的就是第8行和第9行.一定要多减去1 因为for循环从0开始,而数组长度是从0到length-1的. class ArrReverse { //实现数组元素的 ...

  10. springboot - 返回xml error 从自定义的 ErrorController

    1.概览 2.在<springboot - 返回JSON error 从自定义的 ErrorController>基础上,做如下调整: 1).新增Attribute类和Error类 pac ...