使用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. 实验四 时序逻辑电路的VHDL设计

    一.实验目的 熟悉QuartusⅡ的VHDL文本设计过程,学习简单时序逻辑电路的设计.仿真和测试方法. 二.实验 1. 基本命题 用VHDL文本设计触发器,触发器的类型可任选一种.给出程序设计.仿真分 ...

  2. HTTP权威指南阅读笔记一：HTTP概述

    HTTP协议版本: 1.HTTP/0.9:HTTP的1991原型版本称为HTTP/0.9.这个协议有很多严重的缺陷,只应该用与与老客户端的交互.HTTP/0.9只支持GET方法,不支持多媒体内容的MI ...

  3. SQL order by的用法

    首先,order by是用来写在where之后,给多个字段来排序的一个DQL查询语句. 其次,order by写法: 1.  select 字段列表/* from 表名 where 条件 order ...

  4. struts2学习笔记之一:基本简介

    Struts2是一个基于MVC设计模式的Web应用框架,它本质上相当于一个Servlet,在MVC设计模式中,Struts2作为控制器来建立模型与视图的数据交互(所有的访问都会被控制器操作控制)   ...

  5. Nodejs学习笔记（十一）--- 数据采集器示例（request和cheerio）

    目录 写在之前 示例 示例要求 采集器 加入代理 请求https 写在之后... 写在之前 很多人都有做数据采集的需求,用不同的语言,不同的方式都能实现,我以前也用C#写过,主要还是发送各类请求和正则 ...

  6. 【Linux高级驱动】LCD驱动框架分析

    1.framebuffer接口层(fbmem.c) 功能:给用户提供接口 fbmem_init  ),"fb",&fb_fops)  /*2.创建一个设备类*/ fb_cl ...

  7. paip. 调试技术打印堆栈 uapi print stack java php python 总结.

    paip. 调试技术打印堆栈 uapi print stack java php python 总结. 作者Attilax  艾龙,  EMAIL:1466519819@qq.com 来源:attil ...

  8. iOS开发之静态库（四）—— 静态框架framework制作

    前面介绍过,虽然苹果公司禁止在iOS开发中使用动态库,而且也从XCode中移除了创建静态框架的功能,但我们还是可以通过对XCode进行小小的改动来创建静态框架. 编译环境:Macbook Air + ...

  9. 优化TableView性能

    优化tableView性能(针对滑动时出现卡的现象) (2013-08-02 11:18:15) 转载▼ 标签: ios tableview it 分类: 技术文档 在iOS应用中,UITableVi ...

  10. swap函数的四种写法

    swap 函数的四种写法 (1)经典型 --- 嫁衣法 void swap(int *a, int *b) { int temp; temp = *a; *a = *b; *b = temp; } ( ...