<!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. MVC、MVT简介

    一.MVC MVC的产生理念: 分工.让专门的人去做专门的事. MVC的核心思想: 解耦. M: Model,模型, 和数据库进行交互. V: View,视图, 产生html页面. C: Contro ...

  2. Django博客开发-数据建模与样式设定

    开发流程介绍 之前Django的学习过程当中已经把基本Django开发学完了,现在以Django 的博客项目完成一遍课程的回顾和总结.同时来一次完整开发的Django体验. 一个产品从研究到编码我们要 ...

  3. JavaScript 转义字符

    转义字符是字符的一种间接表示方式.在特殊语境中,无法直接使用字符自身.例如,在字符串中包含说话内容. "子曰:"学而不思则罔,思而不学则殆."" 由于 Java ...

  4. 配置uboot指定nfs挂载根文件系统

    背景: 文件系统的调试也建议在 网络中进行. 概念: NFS是Network File System的缩写及网络文件系统. 要功能是通过局域网络让不同的主机系统之间可以共享文件或目录. NFS系统和W ...

  5. ubuntu18.04下neo4j的安装

    参考CSDN博客 安装jdk8方式与博客中有不同,按照博客中方法没有成功 以下方法配置环境变量成功 进入配置文件 [root@cuierdan java]# vim /etc/profile在文件的后 ...

  6. 【LeetCode】三角形最小路径和

    [问题]给定一个三角形,找出自顶向下的最小路径和.每一步只能移动到下一行中相邻的结点上.例如,给定三角形: [ [], [,], [,,], [,,,] ] 自顶向下的最小路径和为 (即, + + + ...

  7. R 对数变换 《回归分析与线性统计模型》page103

    BG:在box-cox变换中,当λ = 0时即为对数变换. 当所分析变量的标准差相对于均值而言比较大时,这种变换特别有用.对数据作对数变换常常起到降低数据波动性和减少不对称性的作用..这一变换也能有效 ...

  8. leetCode242 有效的字母异位词

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

  9. 009-PHP循环输出数组成员

    <?php $Cities[] = "<B>北京</B>"; //等同于$Cities[0] = "北京" $Cities[] = ...

  10. mysql concat与concat_ws区别

    select concat('大','小') as size from 表 查询出结果为:大小 select concat('大',NULL) as size from 表 查询出结果为:null c ...