zoukankan html css js c++ java

纯CSS画三角形（带边框）

实例一：

<!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>

实现的效果如下图：
在这里插入图片描述

查看全文

相关阅读:
Json,Gson,FastJson解析笔记
 Java 里把 InputStream 转换成 String 的几种方法
 11大Java开源中文分词器的使用方法和分词效果对比，当前几个主要的Lucene中文分词器的比较
 HDU 1599 find the mincost route
如何更改Java括号中的默认对齐
 Android Java 与 C++ 恒调用，路径、文件名、延长的最大长度
 使用android SpannableStringBuilder实现图文混排，看到许多其他
 POJ 2352 Stars 树阵
 cocos2dx环境配置和打包
 DSR on Openstack POC

原文地址：https://www.cnblogs.com/superfeeling/p/11061631.html