实例一：

<!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. Android NDK 学习之接受Java传入的字符串

    本博客主要是在Ubuntu 下开发,且默认你已经安装了Eclipse,Android SDK, Android NDK, CDT插件. 在Eclipse中添加配置NDK,路径如下Eclipse-> ...

  2. Innodb学习

    一.并发控制 为什么要进行并发控制? 因为并发的任务会对同一个临界资源进行操作,如果不进行并发控制,可能导致不一致,故必须进行并发控制. 如何进行并发控制? 1.锁. 2.数据多版本. 施工ing.. ...

  3. 基于FTP 的本地Yum服务器配置

    服务器端 环境如下 Vmware14CentOS 7.6 192.168.20.81 server 192.168.20.81 client 1.配置yum源 mount /dev/cdrom /me ...

  4. Linux命令——lsb_release

    简介 LSB是Linux Standard Base(Linux标准库)的缩写, lsb_release命令 用来与具体Linux发行版相关的Linux标准库信息. 注:LSB的译法有Linux标准库 ...

  5. 16 Windows编程——系统内置窗口子类型之edit、ComboBox、ownerbutton、listbox

    edit类型的子窗口 ES_MULTILINE:多行输入文本框 窗口的消息: WL_COMMAND: EN_CHANGE:当edit窗口内的文本内容改变的时候,edit子窗口给父窗口发送一个WL_CO ...

  6. webpack中如何编写一个plugin

    loader和plugin有什么区别呢?什么是loader,什么是plugin. 当我们在源代码里面去引入一个新的js文件或者一个其他格式的文件的时候,这个时候,我们可以借助loader去帮我们处理引 ...

  7. Mysql DELETE 不能使用别名? 是我不会用！

    今天碰到一个sql问题,就是在delete中加了别名,导致报错了:"[Err] 1064 - You have an error in your SQL syntax; ..." ...

  8. 前端面试题-JavaScript

    引用GitHub 上 ltadpoles的前端面试 https://github.com/ltadpoles 目录  1. JavaScript 有哪些数据类型  2. 怎么判断不同的JS数据类型   ...

  9. [ARIA] Accessible animations with reduced motion

    Animations can make people sick, or worse! By adding animation toggles and listening in to the user' ...

  10. [Luogu] 送花

    https://www.luogu.org/problemnew/show/2073 自己yy,明显错 #include <bits/stdc++.h> using namespace s ...