使用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. Arcgis for Javascript 在VS2012中的智能提示

    官方地址: https://developers.arcgis.com/en/javascript/jsapi/api_codeassist.html 安装步骤 Visual Studio 2010 ...

  2. ConcurrentDictionary 对决 Dictionary+Locking

    在 .NET 4.0 之前,如果我们需要在多线程环境下使用 Dictionary 类,除了自己实现线程同步来保证线程安全之外,我们没有其他选择. 很多开发人员肯定都实现过类似的线程安全方案,可能是通过 ...

  3. kali linux系列之启用vpn

    kali linux系列之启用vpn 文/玄魂 默认情况下,kali linux的vpn选项是不可用的. 下面是安装openvpn的方法,同样的,可以安装其他类型的vpn. 打开终端输入命令: Apt ...

  4. Linux系列笔记 - 用户以及用户组命令

    一.前言 这一系列的随笔笔记,并不是详细的说明的命令的原理,只是简单的记录, 以备后期的查看以及复习 二.直接输入命令问题 有时候,我们在用 useradd groupadd等命令时,直接在终端输入的 ...

  5. Java-基础练习2

    1.利用文本编辑器输入课堂上练习的Hello.java,并在JDK环境下编译和运行.请将程序编译.运行的结果截图,填入下框中. class Hello{ public static void main ...

  6. ajax温习

    工作中一直有写JS,也一直有用jquery,在感受jquery便利之余,也对它产生了依赖,已至于许多功能只知使用而不知原生写法,就像ajax. 今天不小心翻看了以前学习的视频,温故了一下原生ajax写 ...

  7. Atitit.可视化编程jbpm6 的环境and 使用总结...

    Atitit.可视化编程jbpm6 的环境and 使用总结... 1. Jbpm的意义 1 2. Jbpm6环境配置 2 2.1. Down 2 2.2. Install eclipse jbpm p ...

  8. iOS开发----三目运算符

    一.三目运算符 1.基本格式 : (关系表达式) ? 表达式1 : 表达式2;  执行流程 : 关系表达式为 真 返回表达式1 关系表达式为假 返回表达式2 2.写一个例子来看一下三目运算符的使用: ...

  9. wicket基础应用(1)--使用wicket对表单中的数据进行验证

    作者:lhx1026 出处:http://lhx1026.iteye.com/ wicket基础应用(1)--使用wicket对表单中的数据进行验证 举个例子: 1.有一个Java文件SysCharg ...

  10. Leetcode 328 Odd Even Linked List 链表

    Given 1->2->3->4->5->NULL, return 1->3->5->2->4->NULL. 就是将序号为单数的放在前面,而 ...