实底三角形：

<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. 【PRML读书笔记-Chapter1-Introduction】1.6 Information Theory

    熵 给定一个离散变量,我们观察它的每一个取值所包含的信息量的大小,因此,我们用来表示信息量的大小,概率分布为.当p(x)=1时,说明这个事件一定会发生,因此,它带给我的信息为0.(因为一定会发生,毫无 ...

  2. C#调用Java类

    C#调用Java类 (2011-01-07 14:02:05) 转载▼   分类: Java学习  1. 在Eclipse中新建名称为hello的java project,此工程仅包含一个文件hell ...

  3. Windows7 x64 系统下安装 Nodejs 并在 WebStorm 9.0.1 下搭建编译 LESS 环境

    1. 打开Nodejs官网http://www.nodejs.org/,点“DOWNLOADS”,点64-bit下载“node-v0.10.33-x64.msi”. 2. 下载好后,双击“node-v ...

  4. Erlang进程的Link机制

    这篇文章还不是最终版,有时间时,我会再来补充完善. 什么是link Erlang程序基于进程建模,进程之间的交互机制有收发消息,link和monitor.其中,收发消息通常用于正常的进程间通讯,而li ...

  5. Windows Azure Web Site (17) 设置Web App TimeOut时间

    <Windows Azure Platform 系列文章目录> 我们在开发Azure Web App的时候,如果页面加载时间过长,可能需要设置Time Out时间. 在这里笔者简单介绍一下 ...

  6. “康园圈--互联网+校园平台“项目之sprint2

    一.sprint2任务列表 1.部署框架,并上传代码到github. 2.原型设计 * 设计首页界面原型(包括功能公告.快速通道等展示栏) * 设计店铺浏览页面原型 * 设计店内浏览页面原型 * 设计 ...

  7. 2015年百度之星初赛(1) --- D KPI

    KPI Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submiss ...

  8. UnityShader快速上手指南（二）

    简介 前一篇介绍了如果编写最基本的shader,接下来本文将会简单的深入一下,我们先来看下效果吧 呃,gif效果不好,实际效果是很平滑的动态过渡 实现思路 1.首先我们要实现一个彩色方块 2.让色彩动 ...

  9. 【iOS】FMDB封装，查询自动mapping

    sqlite几乎所有的App都会用到,但是系统自带的sqlite API是用C语言写的,非常不友好,用起来非常不便,通常我们使用第三方封装好的工具,例如:FMDB(https://github.com ...

  10. 【JavaScript回顾】闭包

    什么是闭包? 闭包是指有权访问另一个 函数作用域中的变量的函数(也就是说,你这个函数用到的变量另外一个域的就算闭包) <script> function f1() { var age = ...