实底三角形：

<html>

<head>

<title></title>

<style type="text/css">

a{

display: block;

width: 0;

height: 0;

border-left: 50px solid transparent;  /*左边框实现透明;50ppx是三角形左边框的宽度*/

border-right: 50px solid transparent;

border-bottom: 100px solid red;

}

</style>

</head>

<body>

<a href=""></a>

</body>

</html>

透明三角形：

原理：用俩个三角形进行叠加

<html>

<head>

    <title></title>

    <style type="text/css">

    a:before{

        top:0;

        left:0;

        content: '';

        position: absolute;

        display: block;

        width: 0;

        height: 0;

        border-left: 50px solid transparent;

        border-right: 50px solid transparent;

        border-bottom: 50px solid red;

    }

    a:after{

        top:1px;

        left:2px;

        content: '';

        position: absolute;

        display: block;

        width: 0;

        height: 0;

        border-left: 48px solid transparent;

        border-right: 48px solid transparent;

        border-bottom: 48px solid #fff;

    }

    a{

        position: relative;

    }

    </style>

</head>

<body>

    <a href="">1111</a>

</body>

</html>

css三角形的实现的更多相关文章

  1. 前端读者 | CSS三角形和饼图

    @羯瑞 三角形 .triangle{width:0;height:0;border-width:50px;border-style:solid;border-color:red blue green ...

  2. [CSS]三角形

    CSS盒子模型 当我们把padding和width,height全部设置为0,border设为一个较大的像素时 即:我们需要什么方向的三角形,只需把其余的三角形背景色设置为transparent:

  3. CSS三角形广告文字

    街上经常碰到一些发各类广告传单的,有一次收到一张房地产广告的传单,顺手留下来,看着里面有些广告挺吸引人,同时也想练练自己css技术,故抽空做了一下. 原图某区域如下: 实现上图效果是需要一些想象力的, ...

  4. 纯css三角形

    三角形原理: 盒子c内容width为0,height为0,盒子给一定宽度的border,分别为四边的border设置不同的颜色,则可以得到不同样式的三角形举个简单的栗子:CSS代码 .box1{ wi ...

  5. [HTML/CSS]三角形

    CSS盒子模型 当我们把padding和width,height全部设置为0,border设为一个较大的像素时 即:我们需要什么方向的三角形,只需把其余的三角形背景色设置为transparent:

  6. css三角形实现的几种方法的区别

    演变: .triangle{ height: 30px; width: 30px; display: inline-block; border: 30px solid; border-color: # ...

  7. css 三角形空心三角形的简单实现

    <style> #talkbubble { width: 120px; height: 80px; position: relative; -moz-border-radius: 10px ...

  8. CSS三角形的实现原理及运用

    原理 css盒模型 一个盒子包括: margin+border+padding+content– 上下左右边框交界处出呈现平滑的斜线. 利用这个特点, 通过设置不同的上下左右边框宽度或者颜色可以得到小 ...

  9. CSS三角形/气泡的实现原理及应用

    记得第一次面试,面试官问如何用css实现一个不规则三角形?好叭 ·-·,触及到知识盲区了,手动叹气(╥﹏╥),好在别的回答的还好,没挂

随机推荐

  1. 彻底理解JAVA动态代理

    代理设计模式 定义:为其他对象提供一种代理以控制对这个对象的访问. 代理模式的结构如下图所示. 动态代理使用 java动态代理机制以巧妙的方式实现了代理模式的设计理念. 代理模式示例代码 public ...

  2. HDU 3487 Play with Chain（Splay）

    题目大意 给一个数列,初始时为 1, 2, 3, ..., n,现在有两种共 m 个操作 操作1. CUT a b c 表示把数列中第 a 个到第 b 个从原数列中删除得到一个新数列,并将它添加到新数 ...

  3. mysql 启动错误-server PID file could not be found

    [root@centos var]# service mysqld stop MySQL manager or server PID file could not be found!       [F ...

  4. Java 监控请求

    监控对象 import java.util.Date; import java.util.HashMap; import java.util.Map; import java.util.Map.Ent ...

  5. 将XmlDocument转换成XDocument

    XmlDocument xml=new XmlDocument(); xml.LoadXml(strXmlText); XmlReader xr=new XmlNodeReader(xml); XDo ...

  6. JS魔法堂：阻止元素被选中

    一.前言 在为IE5.5~9polyfill HTML5新特性placeholder时需要阻止元素被选中,因此在网上.书上查阅相关资料,记录在此以便日后查阅. 二.IE10+实现方式──CSS3 .u ...

  7. 计数排序 + 线段树优化 --- Codeforces 558E : A Simple Task

    E. A Simple Task Problem's Link: http://codeforces.com/problemset/problem/558/E Mean: 给定一个字符串,有q次操作, ...

  8. JAVA - 大数类详解

    写在前面 对于ACMer来说,java语言最大的优势就是BigInteger,Bigdecimal,String三个类. 这三个类分别是高精度整数,高精度浮点数和字符串,之所以说这个是它的优势是因为j ...

  9. KMP算法 - 求最小覆盖子串

    KMP与最小覆盖子串 最小覆盖子串:对于某个字符串s,它的最小覆盖子串指的是长度最小的子串p,p满足通过自身的多次连接得到q,最后能够使s成为q的子串. 比如: 对于s="abcab&quo ...

  10. Aspose.Words.Tables.Row类操作word表格行

    http://www.aspose.com/docs/display/wordsnet/Aspose.Words.Tables.Row+Class Retrieves the index of a r ...