实底三角形：

<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. DMSFrame 之SqlCacheDependency（一）

    1.SqlCacheDependency都是我们常用的一种Cache写法了.对后面的SQL 2005算是比较成熟的一种缓存模式了,这里介绍一下DMSFrame的SqlCacheDependency是怎 ...

  2. IMongoQuery的内部实现Query的用法

    Query.All("name", "a", "b");//通过多个元素来匹配数组 Query.And(Query.EQ("nam ...

  3. DDD：Repository和UnitOfWork的生命周期问题

    UnitOfWork UnitOfWork是一种有状态的.用例级别的对象.如果不采用ORM是不会使用UnitOfWork模式的, Repository Repository是一种特殊的领域服务,因此是 ...

  4. IP Failover Setup using Keepalived on CentOS/Redhat 6

    source url:http://tecadmin.net/ip-failover-setup-using-keepalived-on-centos-redhat-6/ Keepalived is ...

  5. Appium移动自动化测试（三）--安装Android模拟器

    当Android SDK安装完成之后,并不意味着已经装好了安装模拟器.Android系统有多个版本,所以我们需要选择一个版本进行安装. 第三节  安装Android 模拟器 我这里以Android 4 ...

  6. UWP开发入门（十一）——Attached Property的简单应用

    UWP中的Attached Property即附加属性,在实际开发中是很常见的,比如Grid.Row: <Grid Background="{ThemeResource Applica ...

  7. Struts2 之 实现文件上传和下载

    Struts2  之 实现文件上传和下载 必须要引入的jar commons-fileupload-1.3.1.jar commons-io-2.2.jar 01.文件上传需要分别在struts.xm ...

  8. 《构建之法》第8、9、10章 读书笔记和Sprint总结

    第八章:需求分析 这章主要解析了需求的多面方面,不同的项目需要不同的手段,真正的需求稍纵即逝,需要靠火眼金睛和敏捷的身手来发现并抓住它们.另外,很多时候用户并不知道自己确切的需求,或者不愿意表达完整的 ...

  9. ASP.NEt MVC5--创建下拉列表

    Adding Search by Genre If you added the HttpPost version of the Index  method, delete it now. Next, ...

  10. ASP.NET的简单与面向对象开发

    ASP.NET开发,一开始是为了超赶时间完成任务,只能把功能实现即可.如下面一个功能,在网页中有一个铵钮,用户点一点切换网页的图片,再点一点又切换回来.我们要怎样做?在铵钮事件中去变更图片的路径即可. ...