实例一：

<!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. K2 BPM_康熙别烦恼（上篇）——分级授权_工作流引擎

  2. Dockerfile的编写（主观汇聚篇）

    目录 一.什么是dockerfile 二.Dockerfile的基本结构 Dockerfile文件说明 三.总结 一.什么是dockerfile dockerfile是使用者用来自定义构建一个dock ...

  3. RestFramework之认证组件

    一.认证组件的介绍 对于认证,我们一般有三种方式,即cookie, session,token, cookie,是将信息存放在客户端(浏览器上),信息不安全: session,把信息放在服务器数据库中 ...

  4. CSS之选择器相关

    一.选择器的作用 选择器就是用来选择标签的,要使用css对HTML页面中的元素实现一对一,一对多或者多对一的控制,这就需要用到CSS选择器. HTML页面中的元素就是通过CSS选择器进行控制的.每一条 ...

  5. linux安装zookeeper,安装zkui,zookeeper可视化

    系统要求 支持的平台 ZooKeeper由多个组件组成.某些组件得到广泛支持,其他组件仅在较小的平台上受支持. 客户端是Java客户端库,应用程序使用它连接到ZooKeeper集合. Server是在 ...

  6. apache Directory Studio 简易使用

    apache Directory Studio 简易使用 本文首发:https://www.somata.work/2019/apacheDirectoryStudioSimpleUse.html 以 ...

  7. Arduino Tian开发板：一个功能强大的天气预报中心

    每天都在出现新的连接设备. Arduino携手云平台一起加入这场战斗,于是出现了一个新的挑战者 - Arduino Tian! 使用python和经典Arduino框架,本教程将引导您将您的Ardui ...

  8. ResNet网络的Pytorch实现

    1.文章原文地址 Deep Residual Learning for  Image Recognition 2.文章摘要 神经网络的层次越深越难训练.我们提出了一个残差学习框架来简化网络的训练,这些 ...

  9. webpack 配置react脚手架（三）：eslint 及优化

    首先谨记 eslint的官网:  http://eslint.cn/ 1 安装eslint  npm i eslint -D 2.在根目录下新建文件 .eslintrc { "extends ...

  10. concat以及group_concat的用法

    concat()函数 1.功能:将多个字符串连接成一个字符串. 2.语法:concat(str1, str2,...) 返回结果为连接参数产生的字符串,如果有任何一个参数为null,则返回值为null ...