实例一：

<!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. UI5-技术篇-SAP UI5数据表进行了比较：sap.m.Table与sap.ui.table.Table

    https://a.kabachnik.info/sap.m.table-vs-sap.ui.table.table-features-compared.html SAP UI5数据表进行了比较:sa ...

  2. dubbo和mq的使用场景

    MQ:消息队列.生产者消费者模式,可用于对消息实时性要求不高的场景.多进程之间间接调用关系 Dubbo:RPC实现.多进程之间直接调用关系 dubbo 1,rpc的分布式集群支持:负载均衡是对外提供一 ...

  3. [dev][ipsec][distributed] strongswan如何做热迁移/高可用/High Availability

    问题描述: 原生的基于kernel 的 strongswan 如何做高可用,HA,High Availability 问题分析: 基于我们已知的,ipsec,strongswan的知识.问题分解如下: ...

  4. python 爬虫相关含Scrapy框架

    1.从酷狗网站爬取 新歌首发的新歌名字.播放时长.链接等 from bs4 import BeautifulSoup as BS import requests import re import js ...

  5. 关于strlen和sizeof的使用

    在学习C语言中发现strlen和sizeof的关系不是很明确,今天来总结一下这两个的区别: sizeof 是运算符,用来计算字节数,在计算字符串数组大小时包含(\0) 在编译时计算大小,参数可以是数组 ...

  6. 移动端自适应js

    window.addEventListener('resize', setHtmlFontSize) setHtmlFontSize(); function setHtmlFontSize() { v ...

  7. Selenium（十四）处理登录框的验证码

    对于 web 应用来说,大部分的系统在用户登录时都要求用户输入验证码,验证码的类型的很多,有字母数字的,有汉字的,甚至还要用户输入一条算术题的答案的,对于系统来说使用验证码可以有效果的防止采用机器猜测 ...

  8. 7月新的开始 - Axure学习06 - 母版的使用

    母版的使用 主导航.底部.在很多页面上都是一样的: 如果在每一个页面都写一次的化.话.是非常浪费时间的,为了方便.可以使用母版: 母版可以帮助我们将一些元素重复利用,既可以保证页面的统一性.还可以节省 ...

  9. Centos 拒绝ssh远程暴力破解方法

    佳木斯SEO摘要 有一天突然收到一封邮件,邮件内容告知我的ECS服务器作为肉鸡在攻击别的机器,期初一想,一定是我机器的账号密码被泄露,或者是被人暴力破解,于是乎,我就查询了一下我机器的账号登录记录. ...

  10. LeetCode刷题分类-解题模式

    模式1:如果是已经排好序的序列(数组,链表,或是矩阵),我们就可以用二分的变种或是双指针策略 模式2: 如果我们需要处理n个元素中:顶部/最大/最小/最接近的k个元素时,我们就可以用堆来解决了. 模式 ...