使用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. 使用VS2013在WIN8.1上运行gaclib的hello world

    首先:gaclib的官网是http://www.gaclib.net/ 需要了解更多信息的请自己去官网,我也是刚刚研究   第一步 下载gaclib的源码   这些文件是运行程序所必须的   第二步 ...

  2. 收缩SQL Server日志不是那么简单的（翻译）

    原文地址:http://rusanu.com/2012/07/27/how-to-shrink-the-sql-server-log/ 说明:本文为了更好的说明收缩的过程,在原文翻译的基础上增加了一些 ...

  3. git删除push到远程服务器的commit

    如果不小心把不该提交的代码或者敏感的数据(如密码)提交到远程git服务器上,可以使用git reset回滚到上一个commit,并且commit history不留下任何痕迹. 具体做法: # 1.通 ...

  4. PHP 开发社区微信服务号实战图解

    本博文就月初刚上线的微信服务号,图文进行总结分享给大家. 去年年底,我所在的团队讨论要开发微信号,话题由此拉开: 原来有一个3年前注册的微信号,但是后台操作无法从“订阅号”变更为“服务号”,随即找腾讯 ...

  5. memcached与.NET的融合使用（一）

    流量开始暴增之后,访问速度开始明显不如以前,开始考虑在程序中加入缓存,以前最常用的就是asp.net的cache,优点是进程内cache,效率非常高,同时对于缓存的对象可以直接获得 引用,并进行修改, ...

  6. Msbuild利用cpu多核加速

    msbuild /t:Rebuild /p:Configuration=Release /m /m 自动检测cpu数量启动对应数量进程

  7. Django MVC simple

  8. Atitit.并发编程原理与概论 attilax总结

    Atitit.并发编程原理与概论 attilax总结 1. 并发一般涉及如下几个方面:2 2. 线程安全性 ( 2.2 原子性 2.3 加锁机制2 2.1. 线程封闭3.3.1Ad-hoc线程封闭 3 ...

  9. Effective STL中文版 译序

    <Effective STL中文版>译序 就像本书的前两本姊妹作(Effective C++.More Effective C++)一样,本书的侧重点仍然在于提升读者的经验,只不过这次将焦 ...

  10. MF-800U

    MF-800U 价格:200元左右 https://item.taobao.com/item.htm?spm=a230r.1.14.6.kfkqoY&id=4963072384&ns= ...