实例一：

<!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. 分布式Hadoop和HBase整合

    环境: CentOS 6.6                hadoop-2.6.0            hbase-0.98.10.1 HBase1    192.168.1.4     Mast ...

  2. unittest 运行slenium（二）---打开浏览器及元素操作

    一: 打开win10中安装的浏览器 1. 打开的浏览器有:谷歌/火狐/ie/edge 2. 当浏览器的driver没有配置在path环境下时,在启动浏览器时需要传入driver的所在位置 3. 其中火 ...

  3. 可能是东半球最好的 Curl 学习指南，强烈建议收藏！

    本文首发于:微信公众号「运维之美」,公众号 ID:Hi-Linux. 「运维之美」是一个有情怀.有态度,专注于 Linux 运维相关技术文章分享的公众号.公众号致力于为广大运维工作者分享各类技术文章和 ...

  4. JavaScript函数封装调用

    举个列子:我们在写前端页面,经常会使用到Jquery文本框内容,来判断一下输入值是否符合,常见的写法: <script> function test(){ $("#ID" ...

  5. PAT基础级-钻石段位样卷2-7-2 吃鱼还是吃肉 (10 分)

      国家给出了 8 岁男宝宝的标准身高为 130 厘米.标准体重为 27 公斤:8 岁女宝宝的标准身高为 129 厘米.标准体重为 25 公斤. 现在你要根据小宝宝的身高体重,给出补充营养的建议. 输 ...

  6. PAT基础级-钻石段位样卷2-7-1 心理阴影面积 (5 分)

    这是一幅心理阴影面积图.我们都以为自己可以匀速前进(图中蓝色直线),而拖延症晚期的我们往往执行的是最后时刻的疯狂赶工(图中的红色折线).由红.蓝线围出的面积,就是我们在做作业时的心理阴影面积. 现给出 ...

  7. 使用Nginx实现反向代理 - 不同的子域名映射到不同的后台地址

    1.配置IP域名 C:\Windows\System32\drivers\etc\hosts中加入 127.0.0.1 8081.max.com 127.0.0.1 8082.max.com 2.配置 ...

  8. VueRouter基础

    安装 直接下载(官方CDN) https://unpkg.com/vue-router/...通过页面script标签引入,如下: <script src='https://unpkg.com/ ...

  9. bootstrap之collapse

    <div class="container"> <!--该button可以控制div是否显示 1.首先给button设置data-toggle="col ...

  10. 第十三章 使用ADO.NET访问数据库

    一,什么是ADO.NET ADO.NET 是一种以面向对象的设计方法构建的数据访问和操作的类库,它建立在.NET平台上,以便于操作各种各样的数据源.这些数据源可以是数据库, 也可以是文本文件 ,EXC ...