快捷导航
蚂蚁部落 网站首页 实例代码 CSS实例 查看内容

CSS 顶部带有三角形的矩形

2017-5-13 14:58| 发布者: antzone| 查看: 217| 评论: 0|来自: 蚂蚁部落

分享一段代码实例,它实现了顶部带有三角形的矩形效果。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .fa {
            position: relative;
            width: 150px;
            height: 80px;
            border: 1px solid #333;
            margin: 40px;
            border-radius: 5px;
            text-align: center;
            line-height: 80px;
            background-color: #FFF5EE;
        }
        
        .fa2 {
            position: absolute;
            width: 0;
            height: 0;
            left: 30px;
            top: -32px;
            border-width: 16px;
            border-style: solid;
            border-color: transparent transparent #333 transparent;
        }
        
        .fa2>div {
            position: absolute;
            width: 0;
            height: 0;
            left: -15px;
            top: -14px;
            border-width: 15px;
            border-style: solid;
            border-color: transparent transparent #FFF5EE transparent;
        }
    </style>
</head>

<body>
    <div class="fa ">
        <div class="fa2">
            <div></div>
        </div>
        蚂蚁部落
    </div>

</body>

</html>

鲜花

握手

雷人

路过

鸡蛋

最新评论

关于我们|手机版|小黑屋| 蚂蚁部落 ( 鲁ICP备10022556号-3 )

GMT+8, 2017-6-25 04:48 , Processed in 0.058658 second(s), 22 queries .

Powered by Discuz! X3.2 Licensed

Copyright © 2012-2017 Design: 蚂蚁部落

返回顶部