实例一：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <style>
  8.     .find-div-body{
  9.         position: relative;
  10.         top:30px;
  11.         right:0px;
  12.         width:400px;
  13.         height:200px;
  14.         padding:8px;
  15.         background-color: #FFFFFF;
  16.         border: #cccccc solid 1px;
  17.         border-radius: 3px;
  18.     }
  19.     .find-div-body:before{
  20.         box-sizing: content-box;
  21.         width: 0px;
  22.         height: 0px;
  23.         position: absolute;
  24.         top: -16px;;
  25.         right:41px;
  26.         padding:0;
  27.         border-bottom:8px solid #FFFFFF;
  28.         border-top:8px solid transparent;
  29.         border-left:8px solid transparent;
  30.         border-right:8px solid transparent;
  31.         display: block;
  32.         content:'';
  33.         z-index: 12;
  34.     }
  35.     .find-div-body:after{
  36.         box-sizing: content-box;
  37.         width: 0px;
  38.         height: 0px;
  39.         position: absolute;
  40.         top: -18px;;
  41.         right:40px;
  42.         padding:0;
  43.         border-bottom:9px solid #cccccc;
  44.         border-top:9px solid transparent;
  45.         border-left:9px solid transparent;
  46.         border-right:9px solid transparent;
  47.         display: block;
  48.         content:'';
  49.         z-index:10
  50.     }
  51. </style>
  52. <body>
  53.     <div class="find-div-body">
  54. </div>
  55.  
  56. </body>
  57. </html>

实现的效果如下图：

实例二：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <style>
  8.     .find-div-body{
  9.         position: relative;
  10.         top:30px;
  11.         left: 100px;
  12.         width:400px;
  13.         height:200px;
  14.         padding:8px;
  15.         background-color: #FFFFFF;
  16.         border: #cccccc solid 1px;
  17.         border-radius: 3px;
  18.     }
  19.     .find-div-body:before{
  20.         box-sizing: content-box;
  21.         width: 0px;
  22.         height: 0px;
  23.         position: absolute;
  24.         top: 23px;;
  25.         left: -16px;
  26.         padding:0;
  27.         border-right: 8px solid #FFFFFF;
  28.         border-top:8px solid transparent;
  29.         border-bottom: 8px solid transparent;
  30.         border-left:8px solid transparent;
  31.         display: block;
  32.         content:'';
  33.         z-index: 12;
  34.     }
  35.     .find-div-body:after{
  36.         box-sizing: content-box;
  37.         width: 0px;
  38.         height: 0px;
  39.         position: absolute;
  40.         top: 22px;;
  41.         left: -18px;
  42.         padding:0;
  43.         border-right: 9px solid #cccccc;
  44.         border-top:9px solid transparent;
  45.         border-bottom:9px solid transparent;
  46.         border-left:9px solid transparent;
  47.         display: block;
  48.         content:'';
  49.         z-index:10
  50.     }
  51. </style>
  52. <body>
  53.     <div class="find-div-body">
  54. </div>
  55.  
  56. </body>
  57. </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. BASIS小问题汇总1

    try to start SAP system but failed 2019-04-04 Symptom: when i tried to start SAP system, using the c ...

  2. （三）react-native开发系列之开发环境集成

    先上图,由于是虚拟机中的ios虚拟器,所以有点卡 关于react-native的开发集成,主要包括以下几个方面 1.路由及页面跳转 2.数据请求的封装 3.状态的管理 4.公共方法和全局变量的封装 5 ...

  3. JSON【1】

    http://repo1.maven.org/maven2/com/fasterxml/jackson/core/    JSON[jar]包下载 JSON是什么? 是一种轻量级的数据交换格式,完全独 ...

  4. centos7 修改内核文件 网卡名称为标准名称eth0

    在开机安装系统之前按TAB键后输入标记信息后安装系统就可以变成标准网卡接口eth0 或eth1

  5. Python Multiprocessing 多进程，使用多核CPU计算 并使用tqdm显示进度条

    1.背景   在python运行一些,计算复杂度比较高的函数时,服务器端单核CPU的情况比较耗时,因此需要多CPU使用多进程加快速度 2.函数要求  笔者使用的是:pathos.multiproces ...

  6. Java中实现图片的上传

    这边直接存放在c盘的指定目录,在property中指定了一个目录 没有花时间写用户操作的上传页面,直接用swagger2插件,可以上传 默认图片大小超过1mb就不可以上传,可以如下更改 server. ...

  7. Write-Off

    What is a Write-Off? Write-offis an accounting term referring to an action whereby the book value of ...

  8. 1205 CSRF跨站请求与django中的auth模块使用

    目录 今日内容 昨日回顾 基于配置文件的编程思想 importlib模块 简单代码实现 跨站请求伪造csrf 1. 钓鱼网站 如何实现 模拟该现象的产生 2. 解决问题 解决 {% csrf_toke ...

  9. UML之九种图

    UML说是九种图吧!其实是众说纷纭,不管有几种图,我们只要能够很好的运用这几张图就好,主要有用例图.类图.对象图.状态图.活动图.序列图.协作图.构件图和部署图,至于包图是否属于这九种图,我也理不清楚 ...

  10. mysql安装笔记

    MySQL-mysql 8.0.11安装教程 - Laumians - 博客园  https://www.cnblogs.com/laumians-notes/p/9069498.html mysql ...