<html>

<head>

    <meta charset="utf-8">

    <title>CSS绘制三角形和箭头</title>

</head>

<style>

.d2 {

    width: 0;

    height: 0;

    border-width: 100px;

    border-style: solid;

    border-color: #FFCCCC #0099CC #996699 #339933;

}

.d3 {

    width: 0;

    height: 0;

    border-width: 50px;

    border-style: solid;

    border-color: transparent transparent transparent #FFCCCC;

}

.left {

    position: absolute;

}

.left:before,

.left:after {

    position: absolute;

    content: '';

    border-top: 10px transparent dashed;

    border-left: 10px transparent dashed;

    border-bottom: 10px transparent dashed;

    border-right: 10px #fff solid;

}

.left:before {

    border-right: 10px #0099CC solid;

}

.left:after {

    left: 3px;

    /*覆盖并错开1px*/

    border-right: 10px #fff solid;

}

</style>

<body>

    <div class="d2"></div>

    <div class="d3"></div>

    <div class="left"></div>

</body>

</html>

CSS绘制三角形和箭头的更多相关文章

  1. CSS绘制三角形和箭头，不用再用图片了

    前言 还在用图片制作箭头,三角形,那就太lou了.css可以轻松搞定这一切,而且颜色大小想怎么变就怎么变,还不用担心失真等问题. 先来看看这段代码: /**css*/.d1{ width: 0; he ...

  2. CSS 魔法系列：纯 CSS 绘制三角形（各种角度）

    我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...

  3. css绘制三角形原理

    1.新建一个元素,将它的宽高都设置为0:然后通过设置border属性来实现三角形效果,下面是css绘制三角形的原理: <!DOCTYPE html> <html> <he ...

  4. CSS学习笔记（8）--纯CSS绘制三角形（各种角度）

    纯CSS绘制三角形(各种角度) CSS三角形绘制方法,学会了这个,其它的也就简单.   我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多 ...

  5. 纯Css绘制三角形箭头三种方法

    在制作网页的过程中少不了绘制类似图片的三角形箭头效果,虽然工程量不大,但是确实麻烦.在学习的过程中,总结了以下三种方法,以及相关的例子. 一.三种绘制三角形箭头方法 1.方法一:利用overflow: ...

  6. 用CSS绘制三角形

    其实用HTML CSS绘制三角行 是非常简单的 ,我在网上看了不少人写的博客,里面写的好复杂样子,反正我是看的云里雾里的,说实话是挺简单的. 首先提出一段代码: <!DOCTYPE html&g ...

  7. CSS绘制三角形的原理剖析

    今天学习Bootstrap时候,看到按钮的向下三角形源码: .caret { display: inline-block; ; ; margin-left: 2px; vertical-align: ...

  8. CSS绘制三角形—border法

    1. 实现一个简单的三角形 使用CSS盒模型中的border(边框)即可实现如下所示的三角形:   CSS实现简单三角形 实现原理: 首先来看在为元素添加border时,border的样子:假设有如下 ...

  9. 纯CSS绘制三角形（各种角度）

    我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...

随机推荐

  1. Linux环境ZooKeeper安装配置及使用

    Linux环境ZooKeeper安装配置及使用 一.ZooKeeper 1.1 zookeeper作用 1.2 zookeeper角色 1.3 zookeeper功能 二.集群规划 三.安装流程 (1 ...

  2. Cookie (设置与读取、超时设置、指定路径、显示用户上次登录时间)

    Cooike简介 Cookie 是在 HTTP 协议下,服务器或脚本可以维护客户工作站上信息的一种方式.Cookie 是由 Web 服务器保存在用户浏览器(客户端)上的小文本文件,它可以包含有关用户的 ...

  3. VMware虚拟机串口与宿主机进行传输验证

    一.验证目的 1.验证VMWARE虚拟机(Windows或Linux)上的程序,是否可以读取宿主服务器的物理串口中的数据. 二.验证过程 1.验证条件及工具, 宿主机:Windows 10 x64 V ...

  4. Spring boot AOP 记录请求日志

    如何将所有的通过url的请求参数以及返回结果都输出到日志中? 如果在controller的类中每个方法名都写一个log输出肯定是不明智的选择. 使用spring的AOP功能即可完成. 1. 在pom. ...

  5. docker --- （入门必读）

    容器 容器就是一个视图隔离.资源可限制.独立文件系统的进程集合.所谓"视图隔离"就是能够看到部分进程以及具有独立的主机名等:控制资源使用率则是可以对于内存大小以及 CPU 使用个数 ...

  6. mysql-mysqli_fetch_all（错误）

    mysql-mysqli_fetch_all(错误) 问题:使用mysql-mysqli_fetch_all获取返回的数组时失败/报错 原因及解决方法: mysqli_fetch_all函数只存在于m ...

  7. Python Line Messaging Api

    Line Messaging line 是国外一个很火的实时通信软件,类似与WX,由于公司业务需求,需要基于line开发一个聊天平台,下面主要介绍关于line messaging api 的使用. 官 ...

  8. Codeforces Round #644 (Div. 3)

    比赛链接:https://codeforces.com/contest/1360 A - Minimal Square 题意 计算能包含两个 $a \times b$ 矩形的最小正方形的面积. 题解 ...

  9. hdu1625 Numbering Paths (floyd判环)

    Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total Submission ...

  10. codeforces 86D D. Powerful array

    An array of positive integers a1, a2, ..., an is given. Let us consider its arbitrary subarray al, a ...