<!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. Myeclipse项目出现红叉解决方案

    1.右键点击你的项目.选中properties 2.选中MyEclipse下的Project Facets里面的java 此时的版本号为1.5,修改 3.选中MyEclipse下的Project Fa ...

  2. springboot常见注解 2020-01-19

    1,@SpringBootApplication 是springboot的核心注解,用在启动类上,是由 @Configuration 加载spring,配置spring并启动spring容器; 启动容 ...

  3. k8s node断电重启

    kubernetes断电重启 导致部分pod无法删除 dashboard上处于黄色 kubectl get处于terminate 状态 kubectl delete报错: An error occur ...

  4. HDU 5523：Game

    Game  Time Limit: 2000/1000 MS (Java/Others)  Memory Limit: 131072/131072 K (Java/Others) 问题描述 XY在玩一 ...

  5. 51nod 1380：夹克老爷的逢三抽一

    1380 夹克老爷的逢三抽一 基准时间限制:1 秒 空间限制:131072 KB 分值: 320 难度:7级算法题  收藏  取消关注 又到了诺德县的百姓孝敬夹克大老爷的日子,带着数量不等的铜板的村民 ...

  6. HihoCoder第一周与POJ3974：最长回文字串

    这个题目是hihoCoder第一周的题目,自己打算从第一周开始做起,不知道能追上多少,更不知道这一篇写完,下一篇会是什么时候... 题意很简单. 输入: abababa aaaabaa acacdas ...

  7. ROS学习笔记7-理解服务（services）和参数（parameter）

    本文内容来自官方wiki:http://wiki.ros.org/ROS/Tutorials/UnderstandingServicesParams ROS服务(service)服务也是ROS中一种通 ...

  8. SqlServer查看锁表与解锁

    某些情况下,sqlserver的表会被锁住,比如某个会话窗口有数据一直没提交,窗口又没关闭,这时表就会被锁住 其他任何连接查询表数据时都不会返回 这时需要手工杀掉产生死锁的会话ID,才能恢复正常 查看 ...

  9. Java从.CSV文件中读取数据和写入

    .CSV文件是以逗号分割的数据仓储,读取数据时从每一行中读取一条数据元祖,也就是一条数据,再用字符分割的方式获取表中的每一个数据项. import java.io.BufferedReader;    ...

  10. 微信小程序提示：https://api.map.baidu.com 不在以下 request 合法域名列表中

    如果你想利用百度地图API定位来获得当前位置,但却出现了如标题所示问题,那么请接着看: 1.首先我们需要在百度地图开放平台(https://lbs.baidu.com/apiconsole/key?a ...