实底三角形：

<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. 细数Qt开发的各种坑(欢迎围观)

    1:Qt的版本多到你数都数不清,多到你开始怀疑人生.从4.6开始到5.8,从MSVC编译器到MINGW编译器,从32位到64位,从Windows到Linux到MAC.MSVC版本还必须安装对应的VS2 ...

  2. DevExpress.XtraGrid winform试用分享

    DevExpress.XtraGrid在winform里使用还挺麻烦,为了减少重复代码和代码复用,本人针对DevExpress.XtraGrid封装了一个Form的基类,其中涵盖了DevExpress ...

  3. google全球地址大全

    https://github.com/justjavac/Google-IPs http://www.aol.com/依托于google的一个搜索,通过这个搜索

  4. 用x86的模拟器内核记得安装intel的haxm

    Android 模拟器一直以运行速度慢著称, 本文介绍使用 Intel HAXM 技术为 Android 模拟器加速, 使模拟器运行度媲美真机, 彻底解决模拟器运行慢的问题. Intel HAXM ( ...

  5. STM32 flash 内存分布介绍

    摘要: 本文以STM32F103RBT6为例介绍了片上Flash(Embedded Flash)若干问题,包括Flash大小(内存映射).块大小.页面大小.寄存器.这些知识,有利于写Flash驱动. ...

  6. MyEclipse for Spring启动时报错"An internal error occurred during: 'Updating indexes'.Java heap space"的解决办法

    问题 MyEclipse for Spring在启动时,报如下错误:An internal error occurred during: 'Updating indexes'.Java heap sp ...

  7. DDD：Can I DDD？

    下面是<实现领域驱动>的作者给出的一段话: You can implement DDD if you have: A passion for creating excellent soft ...

  8. 受限玻尔兹曼机（RBM）学习笔记（六）对比散度算法

      去年 6 月份写的博文<Yusuke Sugomori 的 C 语言 Deep Learning 程序解读>是囫囵吞枣地读完一个关于 DBN 算法的开源代码后的笔记,当时对其中涉及的算 ...

  9. C++中指针和引用的区别

    ①指针可以为空,引用不能为空: ②指针可以被赋值,引用必须在声明时赋值,之后不能被赋值: ③指针可以指向堆中空间,引用不能指向堆中空间,如int &p=new int; 会编译出错.

  10. 一些JavaScript题目

    在JavaScript中,运行下面代码,sum的值是(). var sum=0;for(i=1;i<10;i++){if(i%5==0)break;sum=sum+i;} A. 40B. 50C ...