<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. 通过Portainer统一管理不同服务器的Docker

    通过Portainer统一管理不同服务器的Docker 一.可视化管理工具Portainer的安装 二.跨服务器管理Docker 2.1开启2375监听端口 2.2Portainer配置远程管理 一. ...

  2. Linux-CentOS7环境MySQL安装配置

    Linux-CentOS7环境MySQL安装配置 1. 安装准备 (1)检查MySQL是否已安装 (2)如果有的话,就全部卸载 2. 安装libaio (1)检索相关信息: (2)安装依赖包: 3. ...

  3. Git基本概念，流程，分支，标签及常用命令

    Git基本概念,流程,分支,标签及常用命令 Git一张图 Git基本概念 仓库(Repository) 分支(Branch) Git工作流程 Git分支管理(branch) 列出分支 删除分支 分支合 ...

  4. MyEclipse配置maven以及项目jar包更改

    将压缩包解压,路径中不要包含中文,我解压的路径是D:\JAVA\apache-maven-3.0.5 新建环境变量M2_HOME 指向D:\JAVA\apache-maven-3.0.5 在path中 ...

  5. ArrayList源码分析（JDK1.8）

    概述 ArrayList底层是基于数组实现的,并且支持动态扩容的动态数组(变长的集合类).ArrayList允许空值和重复的元素,当向ArrayList中添加元素数量大于其底层数组容量时,会通过扩容机 ...

  6. ElasticSearch 安装与运行

    公号:码农充电站pro 主页:https://codeshellme.github.io 本节来介绍 ES 的安装. 1,下载 ES ES 是基于 Java 语言开发的,因此,要安装 ES,首先需要有 ...

  7. PIE模型

    首先,我们需要明确程序的Bug有如下的定义: 1. Fault/Defect 静态的,存在于软件中的缺陷.例如:一段有缺失或者错误的代码. 2. Error 运行时一种不正确的中间状态. 3. Fai ...

  8. python内置常量是什么？

    摘要:学习Python的过程中,我们会从变量常量开始学习,那么python内置的常量你知道吗? 一个新产品,想熟悉它,最好的办法就是查看说明书! 没错,Python也给我们准备了这样的说明书--Pyt ...

  9. CF-1328 F. Make k Equal

    F. Make k Equal 题目链接 题意 长度为n的序列,每次可以选择一个最大的数字将其减一或者选择一个最小的数字将其加一,问最少操作多少次可以使得序列中至少存在 k 个一样的数字 分析 官方题 ...

  10. ACM-ICPC 2017 Asia Xi'an

    ACM-ICPC 2017 Asia Xi'an Solved A B C D E F G H I J K 7/11 O O Ø O O ? O O O for passing during the ...