CSS 頂部帶有三角形的矩形

antzone發表於2017-05-13
CSS

分享一段程式碼例項，它實現了頂部帶有三角形的矩形效果。

程式碼例項如下:

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

相關文章