使用before、after伪类实现三角形的制作，不需要再为三角形增加不必要的DOM元素，影响阅读。

<!DOCTYPE html>
<html>
<head>
    <style>
        div{
            width: 100px;
            height: 100px;
            border: 1px solid #ccc;
        }
        div:before,
        div:after{
            content: "";
            position: absolute;
            top: 40px;
            left: 100px;
            width: 0px;
            height: 0px;
            border: 10px solid transparent;
            border-left-color: rgb(255,255,255);

}
        div:before{
            top: 39px;
            border: 11px solid transparent;
            border-left-color: #ccc;
        }
    </style>
    
</head>
<body>
    <div></div>
</body>
</html>

使用before、after伪类制作三角形的更多相关文章

  1. 用css伪类制作三角形的三种方法

    在手机上写三角形的时候,我一般都用伪类,刚开始的时候用的图片,但是在现在的手机高清屏幕上,图片容易失真,还是用伪类吧! 第一种:一个90度的“ > ”, 只有线条.(可以做下拉框的箭头之类的) ...

  2. 巧用CSS3 :target 伪类制作Dropdown下拉菜单（无JS）

    :target 是CSS3 中新增的一个伪类,用以匹配当前页面的URI中某个标志符的目标元素(比如说当前页面URL下添加#comment就会定位到id=“comment”的位置,俗称锚).CSS3 为 ...

  3. 巧用CSS3：target 伪类制作Dropdown下拉菜单（无JS）

    原文链接:http://devework.com/css3-target-dropdown.html :target 是CSS3 中新增的一个伪类,用以匹配当前页面的URI中某个标志符的目标元素(比如 ...

  4. CSS-用伪类制作小箭头（轮播图的左右切换btn）

    先上学习地址:http://www.htmleaf.com/Demo/201610234136.html 作者对轮播图左右按钮的处理方法一改往常,不是简单地用btn.prev+btn.next的图片代 ...

  5. :target伪类制作tab选项卡

    :target伪类的作用是突出显示活动的HTML锚,下面是一个简单的例子: HTML代码: <div> <a href="#demo1">点击此处</ ...

  6. 利用:before和:after伪类制作类似微信对话框

    今天学到了怎么做一个小三角形,进而结合其他属性把类似微信对话框的图形做出来了. 先做出如下形状: .arrow { width: 30px; height:30px; border-width:20p ...

  7. 利用:before和:after伪类制作CSS3 圆形按钮 含demo

    要求 必备知识 基本了解CSS语法,初步了解CSS3语法知识. 开发环境 Adobe Dreamweaver CS6 演示地址 演示地址 预览截图(抬抬你的鼠标就可以看到演示地址哦): 制作步骤: 一 ...

  8. 用CSS伪类制作一个不断旋转的八卦图？

    前言 介绍一下如何制作一个不断旋转的八卦图.快速预览代码及效果,点击:八卦图 代码如下: HTML部分 <!DOCTYPE html> <html> <head> ...

  9. afert和b的伪类画三角形

    /* 提示信息 */ .content-tishi{ width: 6.93rem; margin: 0 auto; background: #e9eaea; display: flex; flex- ...

随机推荐

  1. [C#] 與Android共舞–手機post資料給Server （转帖）

    最近在搞安卓,跟Server溝通是一定要的,這範例很簡單,就是我在Android 上面,透過POST 的方式傳資料給 Server ,則Server 收到值後直接回傳, Server side 是用a ...

  2. ASP.NET WEB API 中的路由调试与执行过程跟踪

    路由调试 RouteDebugger 是调试 ASP.NET MVC 路由的一个好的工具,在ASP.NET WEB API中相应的有 WebApiRouteDebugger ,Nuget安装 Inst ...

  3. 团队项目--站立会议 DAY2

    小组名称:D&M 参会人员:张靖颜,钟灵毓秀,何玥,赵莹,王梓萱 项目进展: 1,张靖颜:进行了对需求的分析,将项目框架搭建进行完善,辅助编写代码. 2,钟灵毓秀:相关功能的代码的完善,进行一 ...

  4. CentOS升级MySQL到5.5

    centOS的yum安装的MySQL是5.1版本,可通过官方的rpm包安装5.5版本 # 查看安装的相关项 rpm -qa|grep -i mysql # 停止服务 service mysqld st ...

  5. atitit.编程语言 程序语言 的 工具性 和 材料性 双重性 and 语言无关性 本质

    atitit.编程语言 程序语言 的 工具性 和 材料性 双重性 and 语言无关性 本质 #---语言的 工具和材料双重性 有的人说语言是个工具,有的人说语言是个材料..实际上语言同时属于两个属性. ...

  6. paip.函数方法回调机制跟java php python c++的实现

    paip.函数方法回调机制跟java php python c++的实现 作者Attilax 艾龙,  EMAIL:1466519819@qq.com 来源:attilax的专栏 地址:http:// ...

  7. iOS开发——高级技术&系统应用于系统服务

    系统应用于系统服务 系统应用 在开发某些应用时可能希望能够调用iOS系统内置的电话.短信.邮件.浏览器应用,此时你可以直接使用UIApplication的OpenURL:方法指定特定的协议来打开不同的 ...

  8. LDR 和 ADR 彻底详解

    0.什么是位指令? 答:伪指令(Pseudo instruction)是用于告诉汇编程序如何进行汇编的指令.它既不控制机器的操作也不被汇编成机器代码, 只能为汇编程序所识别并指导汇编如何进行. 1.L ...

  9. DES加密 java与.net可以相互加密解密的方法

    我.net程序员.今天和java的童鞋交互,单点登录的操作.采用了如下的加密和解密的方式.经过验证,完美结合.通过这个方法可以实现java和C#相互加密与解密 并能保持解密出来一致. 废话少说,上代码 ...

  10. Spring第一天

    Spring框架 1.1:了解Spring Spring的核心是提供了一个容器,主要通过 BeanFactory(接口)来创建和管理对象,一般我们用它的子类ApplicationContext 来创建 ...