首页 > Web开发 > 详细

纯CSS画三角形(带边框)

时间:2019-06-20 23:24:40      阅读:497      评论:0      收藏:0      [点我收藏+]

实例一:

<!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画三角形(带边框)

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

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!