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>

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

查看全文

相关阅读:
总结7.13 tp5模板布局
 总结7.13 tp5图像处理
 Flask数据库
 java学习day72-JT项目10(Nginx服务器/tomcat部署/数据库高可用)
java学习day71-Linux学习(基本指令)
java学习day71-JT项目09(Linux/JDK/Mariadb/tomcat部署)
java学习day70-JT项目08(图片回显/Nginx)
java学习day69-JT项目07-(商品/详情一对一操作//文件上传)
java学习day68-JT项目06(商品curd)
java学习day67-JT项目05(商品分类树结构显示)

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