背景画像を使用しないでフィレット効果を実現

1702 ワード


<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title> </title>
        <style>
            .item{
                width: 100px;
                margin: 0 auto;
                padding: 0;
                font: 14px Arial;
                font-weight: bold;
            }
            .item p{
                padding: 0 0 2px 0;
                margin: 0px;
                text-align: center;
                background: #cc6;
                border: 1px solid #000;
                border-top-width: 0px;
            }
            .item div{
                height: 1px;
                overflow: hidden;
                background: #cc6;
                border-left: 1px solid #000;
                border-right: 1px solid #000;
            }
            .item .row1{
                margin: 0 5px;
                background: #000;
            }
            .item .row2{
                margin: 0 3px;
                border: 0 2px;
            }
            .item .row3{
                margin: 0 2px;
            }
            .item .row4{
                margin: 0 1px;
                height: 2px;
            }
        </style>
    </head>
    <body>
        <div class="item">
            <div class="row1"></div>
            <div class="row2"></div>
            <div class="row3"></div>
            <div class="row4"></div>
            <p>Home</p>
        </div>
    </body>
</html>