使用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. [stm32] 利用uc-gui封装画图和画线函数移植51上的模拟动画

    >_<:这里的动画是黄色矩形区域中一个模仿俯视图的起重机运作动画,一个是模仿主视图的吊钩的运动.通过改变初始Init函数中的数据b_x,b_y实现矩形区域的移动.当实时采集时要首先根据起重 ...

  2. ROCK 聚类算法‏

    ROCK (RObust Clustering using linKs)  聚类算法‏是一种鲁棒的用于分类属性的聚类算法.该算法属于凝聚型的层次聚类算法.之所以鲁棒是因为在确认两对象(样本点/簇)之间 ...

  3. 使用Redis实现用户积分排行榜的教程

    转载于:http://www.itxuexiwang.com/a/shujukujishu/redis/2016/0216/129.html?1455808528 排行榜功能是一个很普遍的需求.使用 ...

  4. JSP JSTL EL

    <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> Html代码 复制代 ...

  5. atitit.重装系统需要备份的资料总结 o84..

    atitit.重装系统需要备份的资料总结 o84.. 这里我的系统装在C盘..所以需要备份C盘的东西就好了.. 1.DESKTOP,这个目录要备份.如果重要资料 2.docume nt,这个需要..W ...

  6. 如何获得WPA握手包&EWSA破解WPA密码教程[zz]

    获得WPA\WPA2 握手包的方法有很多,下面介绍通过aircrack-ng工具包来载获握手数据包. 1.下载aircrack-ng工具包. 2.终端里输入 sudo airmon-ng start ...

  7. 忘记hmailiserver邮件服务器后台登陆密码解决

    进入后台进行hmailiserver的相关设置,发现登陆密码忘记了,如下图:

  8. GTD时间管理(3)---行动容器分析理论法

    昨天的一篇文章主要是把清空收集箱的信息,放入对应的清单容器 下面我将会对容器中的每件事经过3个维度的分析 那一个例子直接来说明 Ⅱ:如果这个事件很复杂,需要把这个事件当作一个项目进行拆分,最终量化出完 ...

  9. 微信、陌陌等著名IM软件设计架构详解

    对微信.陌陌等进行了分析,发出来分享一下(时间有些久了) 电量:对于移动设备最大的瓶颈就是电量了.因为用户不可能随时携带电源,充电宝.所以必须考虑到电量问题.那就要检查我们工程是不是有后台运行,心跳包 ...

  10. 使用 SELinux 和 Smack 增强轻量级容器

    http://www.bitscn.com/os/linux/200904/158771.html 安全 Linux 容器实现指南 轻量级容器 又称作 Virtual Private Servers ...