html5实现尖角号

最新推荐文章于 2022-07-05 11:30:41 发布

weixin_30682415

最新推荐文章于 2022-07-05 11:30:41 发布

阅读量497

点赞数

原文链接：http://www.cnblogs.com/domestique/p/6885660.html

版权

首先，来写一个简单的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    .arrow {
        width:0;
        height:0;
        font-size:0;
        border:solid 10px;
        border-color:#f00 #0f0 #00f #000;
    }
    </style>
</head>
<body>
    <div class="arrow"></div>
</body>
</html>

我们发现，原来当div的宽度和高度都是0的时候，它的整个边框是由四个三角形组成的，每一边为一个三角形，那么我们就可以利用这个特点，来做可爱的小尖角了。我们只要把不需要的三边的边框（三角形）的颜色设置为与背景相同即可，这样就只能看到你想要的那个三角形了，然后再利用定位调整一下位置就可以了。具体代码如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    body {
    background:#4D4948;
}

.send {
    position:relative;
    /*父类用相对位置*/
    width:150px;
    height:35px;
    background:#F8C301;
    border-radius:5px; /* 圆角 */
    margin:30px auto 0;
}

.send .arrow {
    position:absolute;
    /*子类用绝对位置*/
    top:5px;
    /*向下移动五个像素*/
    right:-16px;
    /*调试三角的位置*/
    width:0;
    height:0;
    font-size:0;
    border:solid 8px;
    border-color:#4D4948 #4D4948 #4D4948 #F8C301;}

    </style>
</head>
<body>
    <div class="send">
    <div class="arrow"></div>
    </div>
</body>
</html>

转载于:https://www.cnblogs.com/domestique/p/6885660.html

weixin_30682415

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
html5实现尖角号

首先，来写一个简单的代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .arrow { width:0;...
复制链接

扫一扫