<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. Go语言学习笔记（2）——零散的话题（反射）

    这部分是<Go语言编程>这本书的第9章的内容.书中给该章节的定位是一个文章集,其包含了一些Go语言中比较少涉及,或是比较深入的讨论的内容.因为第一节就是反射,而反射在我看来是比较重要的内容 ...

  2. checkAll操作

    //全部勾选 function checkAll(obj) { var cols = document.getElementsByName('cols'); for ( var i = 0; null ...

  3. 翻译：《实用的Python编程》README

    欢迎光临 大约 25 年前,当我第一次学习 Python 时,发现 Python 竟然可以被高效地应用到各种混乱的工作项目上,我立即被震惊了.15 年前,我自己也将这种乐趣教授给别人.教学的结果就是本 ...

  4. Left join查询为空

    这两个查询,上面查询返回空,下面能正常返回记录 两个表结构: left join 没有匹配上得到的b.dates,b.game_id和b.uid都是null值,在按b.dates=20200317 a ...

  5. The Preliminary Contest for ICPC Asia Nanjing 2019 A The beautiful values of the palace（树状数组+思维）

    Here is a square matrix of n * nn∗n, each lattice has its value (nn must be odd), and the center val ...

  6. 【poj 1961】Period（字符串--KMP 模版题）

    题意:给你一个字符串,求这个字符串到第 i 个字符为止的重复子串的个数. 解法:判断重复子串的语句很重要!!if (p && i%(i-p)==0) printf("%d % ...

  7. 分组背包 例题：hdu 1712 ACboy needs your help

    分组背包需求 有N件物品,告诉你这N件物品的重量以及价值,将这些物品划分为K组,每组中的物品互相冲突,最多选一件,求解将哪些物品装入背包可使这些物品的费用综合不超过背包的容量,且价值总和最大. 解题模 ...

  8. Redundant Paths POJ - 3177 把原图变成边—双连通图

    无向图概念:(这里的x->y表示x和y之间有一条无向边)1.桥:对于一个无向图,如果删除某条边后,该图的连通分量增加,则称这条边为桥 比如1->2->3->4这样一个简单得图一 ...

  9. Codeforces Round #565 (Div. 3) C. Lose it! (思维)

    题意:给你一串只含\(4,8,15,16,23,42\)的序列,如果它满足长度是\(6\)的倍数并且有\(\frac {k}{6}\)个子序列是\([4,8,15,16,23,42]\),则定义它是好 ...

  10. 数理统计8：点估计的有效性、一致最小方差无偏估计(UMVUE)、零无偏估计法

    在之前的学习中,主要基于充分统计量给出点估计,并且注重于点估计的无偏性与相合性.然而,仅有这两个性质是不足的,无偏性只能保证统计量的均值与待估参数一致,却无法控制统计量可能偏离待估参数的程度:相合性只 ...