实底三角形：

<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. POJ 2078 Matrix

    Matrix Time Limit: 2000MS   Memory Limit: 30000K Total Submissions: 3239   Accepted: 1680 Descriptio ...

  2. POJ 1330 Nearest Common Ancestors

    Nearest Common Ancestors Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 14698   Accept ...

  3. 电商大促准备流程v2

    1 概述 对于电商企业而言,每年都会有几次大的促销活动,像双十一.店庆等,对于第一次参加这个活动的新手,难免会有些没有头绪,因而将自己参加双十一.双十二活动中的过程心得进行下总结,一方面供以后工作中继 ...

  4. WebKit内核分析之Page

    参考地址:http://blog.csdn.net/dlmu2001/article/details/6213377 注:本系列博客是在原博主博客基础上增加了自己的理解和片段,可以看源博文获得清晰的结 ...

  5. Oracle DBA的神器： PRM恢复工具，可脱离Oracle软件运行，直接读取Oracle数据文件中的数据

    Oracle DBA的神器: PRM恢复工具,可脱离Oracle软件运行,直接读取Oracle数据文件中的数据 PRM 全称为ParnassusData Recovery Manager ,由 诗檀软 ...

  6. [git]git忽略文件

    可以通过创建~/.gitignore_global并添加到git全局配置以减少每层目录的规则重复定义.使用命令git config --global core.excludesfile ~/.giti ...

  7. Device eth0 does not seem to be present,delaying initialization解决方法

    Bringing up interface eth0:  Device eth0 does not seem to be present, delaying initialization. 在linu ...

  8. 用Qt写软件系列一：QCacheViewer(浏览器缓存查看器)

    介绍 Cache技术广泛应用于计算机行业的软硬件领域.该技术既是人们对新技术探讨的结果,也是对当前软硬件计算能力的一种妥协.在浏览器中使用cache技术,可以大幅度提高web页面的响应速度,降低数据传 ...

  9. Java集合Iterator迭代器的实现

    一.迭代器概述 1.什么是迭代器? 在Java中,有很多的数据容器,对于这些的操作有很多的共性.Java采用了迭代器来为各种容器提供了公共的操作接口.这样使得对容器的遍历操作与其具体的底层实现相隔离, ...

  10. JavaScript常用代码

       页面的按钮全选:   function CheckBoxAll() {             //得到页面上所有input表单元素:document.getElementsByTagName( ...