实例一：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<style>

    .find-div-body{

        position: relative;

        top:30px;

        right:0px;

        width:400px;

        height:200px;

        padding:8px;

        background-color: #FFFFFF;

        border: #cccccc solid 1px;

        border-radius: 3px;

    }

    .find-div-body:before{

        box-sizing: content-box;

        width: 0px;

        height: 0px;

        position: absolute;

        top: -16px;;

        right:41px;

        padding:0;

        border-bottom:8px solid #FFFFFF;

        border-top:8px solid transparent;

        border-left:8px solid transparent;

        border-right:8px solid transparent;

        display: block;

        content:'';

        z-index: 12;

    }

    .find-div-body:after{

        box-sizing: content-box;

        width: 0px;

        height: 0px;

        position: absolute;

        top: -18px;;

        right:40px;

        padding:0;

        border-bottom:9px solid #cccccc;

        border-top:9px solid transparent;

        border-left:9px solid transparent;

        border-right:9px solid transparent;

        display: block;

        content:'';

        z-index:10

    }

</style>

<body>

    <div class="find-div-body">

</div>

</body>

</html>

实现的效果如下图：

实例二：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<style>

    .find-div-body{

        position: relative;

        top:30px;

        left: 100px;

        width:400px;

        height:200px;

        padding:8px;

        background-color: #FFFFFF;

        border: #cccccc solid 1px;

        border-radius: 3px;

    }

    .find-div-body:before{

        box-sizing: content-box;

        width: 0px;

        height: 0px;

        position: absolute;

        top: 23px;;

        left: -16px;

        padding:0;

        border-right: 8px solid #FFFFFF;

        border-top:8px solid transparent;

        border-bottom: 8px solid transparent;

        border-left:8px solid transparent;

        display: block;

        content:'';

        z-index: 12;

    }

    .find-div-body:after{

        box-sizing: content-box;

        width: 0px;

        height: 0px;

        position: absolute;

        top: 22px;;

        left: -18px;

        padding:0;

        border-right: 9px solid #cccccc;

        border-top:9px solid transparent;

        border-bottom:9px solid transparent;

        border-left:9px solid transparent;

        display: block;

        content:'';

        z-index:10

    }

</style>

<body>

    <div class="find-div-body">

</div>

</body>

</html>

实现的效果如下图：

纯CSS画三角形（带边框）的更多相关文章

  1. 纯css画三角形

    纯css画三角形与border元素相关 设置border的属性 width: 100px; height: 100px; border-style: solid; border-width: 100p ...

  2. 理解纯CSS画三角形

    pure css draw a triangle code { display: inline-block; width: 300px; background-color: #E0E0E0 } .te ...

  3. 纯css画三角形，勾等形状

    //三角形 .money-ul li.active:after { content: ""; position: absolute; bottom: 0; right: 0; bo ...

  4. 用纯css画个三角形

    用纯css画个三角形以下是源代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...

  5. 三种纯CSS实现三角形的方法

    看到像上图这样的 tip 的小三角,你会怎么办? 切个图上去?恩,不错,简单,兼容性也一级棒,不但好控制,那点小东西也增加不了多少图片的大小.但有没有更好更讲究技巧的办法呢?哈哈,那必须有啊,而且还不 ...

  6. CSS 魔法系列：纯 CSS 绘制三角形（各种角度）

    我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...

  7. 纯 CSS 实现三角形尖角箭头的实例

    上次无意中发现了个使用纯 CSS 实现三角形尖角箭头的方法 http://blog.csdn.net/zhouzme/article/details/18901943 ,但没有怎么用上,也没有详细完整 ...

  8. 纯css竟可以做出边框这样长宽度的过渡效果

    边框效果如下:鼠标移到下面方形,就有效果   要是没有效果,点这个:https://murenziwei.github.io/testGit/Untitled1.html 正如你所看到的,这边框颜色只 ...

  9. CSS学习笔记（8）--纯CSS绘制三角形（各种角度）

    纯CSS绘制三角形(各种角度) CSS三角形绘制方法,学会了这个,其它的也就简单.   我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多 ...

随机推荐

  1. vscode教程（基础篇）

    转载:https://segmentfault.com/a/1190000017949680 本文主要介绍vscode在工作中常用的快捷键及插件,目标在于提高工作效率 本文的快捷键是基于mac的,wi ...

  2. stm32 FSMC-外扩SRAM IS62WV51216

    引脚定义 FSMC配置步骤 1.使能对应引脚GPIO时钟 2.配置GPIO引脚模式 3.使能FSMC时钟 4.FSMC初始化 5.存储器块使能 举例 #define Bank1_SRAM3_ADDR ...

  3. selenium异常

    记一下让我花时间去找解决办法的异常 org.openqa.selenium.ElementNotInteractableException: element not interactable 第一次出 ...

  4. 修改Linux命令的别名：alias

    修改Linux命令的别名. (一)临时生效:仅限当前窗口 查看所有别名 alias 添加别名 alias ll='ls -lh' 重置别名 alias ll='ls -alh' 删除别名: unali ...

  5. AJAX中错误代码解释以及http中的错误代码解释

    xmlhttp.readyState的值及含义: 0:请求未初始化(还没有调用 open()). 1:请求已经建立,但是还没有发送(还没有调用 send()). 2:请求已发送,正在处理中(通常现在可 ...

  6. apache 防盗链

    方法1:Apache防盗链的第一种实现方法,可以用rewrite实现 (1.)首先要确认Apache的rewrite module可用,打开 httpd.conf 文件,如果前面有注释去掉 LoadM ...

  7. wxpython中设置radiobox相关使用

    #coding=utf-8 import wx class MyFrame(wx.Frame): def __init__(self): wx.Frame.__init__(self,None,-1, ...

  8. java基础（1）----简介

    基础语法. 面向对象. 字符串和集合. IO流. 接口. lambda. 方法引用. Stream. 模块化. 一.java的前世今生: J2SE:标准体验版.J2EE:企业版.J2ME:小型版(移动 ...

  9. flask 框架 转载：https://cloud.tencent.com/developer/article/1465949

    1.cookie.py """ - 解释: 用来保持服务器和浏览器交互的状态的, 由服务器设置,存储在浏览器 - 作用: 用来做广告推送 - cookie的设置和获取 - ...

  10. NOSQL数据库简介

    什么是NoSQL?泛指非关系型的数据库不支持SQL语法存储结构跟传统关系型数据库中的那种关系表完全不同,nosql中存储的数据都是Key-Value(即键值对关系)形式NoSQL的世界中没有一种通用的 ...