<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. hadoop的hdfs中的namenode和datanode知识总结

    一,NameNode: 1,  Namenode是中心服务器,单一节点(简化系统的设计和实现),负责管理文件系统的名称空间(namespace)以及客户端对文件的访问. 2, 文件操作,Namenod ...

  2. KVM （虚拟机创建及管理,存储管理）

    创建KVM虚拟机 1.图形化界面创建 第一步:查看软件包组 yum grouplist 第二步:下载GUI界面的软件包组 yum groupinstall "Server with GUI& ...

  3. Tomcat简介、安装部署、上线网站

    资源池 本章资源:点击这里 提取码:upbf tomcat官网:https://tomcat.apache.org/ jpress博客系统安装包下载地址(不是官网):https://gitee.com ...

  4. 小白搭建WAMP详细教程---apache、mysql、php的整合配置

    Apache与PHP整合 我们之前说过PHP能够解析PHP代码, 可是不服务于apache,apache能够获取接收浏览器的请求, 可是不能处理PHP代码, 要实现动态站点开发,就必须结合apache ...

  5. c++11新特性实战（二）：智能指针

    c++11添加了新的智能指针,unique_ptr.shared_ptr和weak_ptr,同时也将auto_ptr置为废弃(deprecated). 但是在实际的使用过程中,很多人都会有这样的问题: ...

  6. linux（7）top命令详细解释

    top命令 Linux top命令用于实时显示 process 的动态. top参数详解 第一行,任务队列信息 系统当前时间:13:52:56 系统开机后到现在的总运行时间:up 66 days,8m ...

  7. c#的dllimport使用方法详解(Port API)

    DllImport是System.Runtime.InteropServices命名空间下的一个属性类,其功能是提供从非托管DLL(托管/非托管是微软的.net framework中特有的概念,其中, ...

  8. Web开发模型

    1.服务器 web服务器:pc机器安装一个具有web服务的软件,称之位web服务器 数据库服务器:pc机器安装一个具有数据管理件服务的软件,称之为web服务器 邮件服务器:pc机器安装一个具有发送邮件 ...

  9. 3. Linear Regression with Multiple Variables

    前面还有一章主要讲解,基本的Linear Algebra线性代数的知识,都比较简单,这里就直接跳过了. Speaker: Andrew Ng 1. Multiple featues 训练集的特征变成了 ...

  10. JavaScript——三

    任务: 其中的"options = options || {}"就代表如果options是一个真的对象,就使用它,否则就给他默认值 在Node函数中: 函数中的this指向wind ...