Html 创建复杂的长方体_Html_Css_Twitter Bootstrap_Css Shapes

Html 创建复杂的长方体

html css twitter-bootstrap

Html 创建复杂的长方体,html,css,twitter-bootstrap,css-shapes,Html,Css,Twitter Bootstrap,Css Shapes,我已经做了一些事情，我正在使用引导的网格系统，正如你所看到的我有些怀疑这样设置箱子的宽度是错误的吗？我如何在盒子的顶部和底部创建这些矛？有人能帮我吗我怎样才能让“SEXTAS E SÁBADOS”保持100%的背景，而不是盒子谢谢 html: <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <meta http-equiv="X-UA

我已经做了一些事情，我正在使用引导的网格系统，正如你所看到的

我有些怀疑

这样设置箱子的宽度是错误的吗？我如何在盒子的顶部和底部创建这些矛？有人能帮我吗

我怎样才能让“SEXTAS E SÁBADOS”保持100%的背景，而不是盒子

谢谢

html:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
        <meta name="O Pub Crawl Oficial de São Paulo" content="" />
        <title></title>
        <link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
        <!--  Bootstrap CDN -->
        <!--  Animate CDN -->

    </head>
    <style type="text/css">
    .col-md-3 {
        position: relative;
    }
    .box {
        margin: 0 auto;
        background: #f98835;
        width: 250px;
        height: 50%;
        text-align: center;
    }
    .dia {
        padding: 5px 0;
        width: 100%;
        color: white;
        background: black;
    }
    h1 {
        font-size: 20px;
        padding-top: 20px;
    }
    .black {
        margin: 0 auto;
        background: #000;
        width: 210px;
        height: 210px;
        background-image: url('http://lorempixel.com/250/250/');
    }

    </style>
    <body>
    <section>
        <div class="container">
            <div class="col-md-3">
                <div class="box">
                    <h1 class="dia">SEXTAS E SÁBADOS</h1>
                    <h1>VILA MADALENA</h1>
                    <div class="black"></div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="box">
                    <h1 class="dia">SEXTAS E SÁBADOS</h1>
                    <h1>VILA MADALENA</h1>
                    <div class="black"></div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="box">
                    <h1 class="dia">SEXTAS E SÁBADOS</h1>
                    <h1>VILA MADALENA</h1>
                    <div class="black"></div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="box">
                    <h1 class="dia">SEXTAS E SÁBADOS</h1>
                    <h1>VILA MADALENA</h1>
                    <div class="black"></div>
                </div>
            </div>
        </div>
    </section>
    </body>
</html>


.col-md-3{
位置：相对位置；
}
.盒子{
保证金：0自动；
背景:#f98835；
宽度：250px；
身高：50%；
文本对齐：居中；
}
.迪亚{
填充：5px0；
宽度：100%；
颜色：白色；
背景：黑色；
}
h1{
字体大小：20px；
填充顶部：20px；
}
布莱克先生{
保证金：0自动；
背景：#000；
宽度：210px；
高度：210px；
背景图像：url（'http://lorempixel.com/250/250/');
}
塞巴多斯六重奏
维拉马达莱纳酒店
塞巴多斯六重奏
维拉马达莱纳酒店
塞巴多斯六重奏
维拉马达莱纳酒店
塞巴多斯六重奏
维拉马达莱纳酒店

试试这个：

.dia {
        position: relative;
        left: -12px;
        bottom: -26px;
        padding: 5px 0;
        width: 110%;
        color: white;
        background: black;
    }

对于几何图形，您可以在

.box

中使用

&befor

，这里有一个链接，指向如何使用

css

绘制几何图形，它在您的情况下可能会很有用：

我会这样做：

对这些边界使用

线性梯度（col-md-3:before
和col-md-3:before
和col-md-3:before
），将直径的宽度设置为total宽度+40px
，并通过设置左-20px
给它一个-20px
偏移量。我已经删除了引导并将display:inline block
添加到.col-md-3


.col-md-3{
显示：内联块；
宽度：110%；
利润率：25px；
}
.集装箱{
高度：400px；
}
.盒子{
保证金：0自动；
背景:#f98835；
宽度：250px；
身高：50%；
文本对齐：居中；
}
.迪亚{
填充：5px0；
颜色：白色；
背景：黑色；
宽度：290px；
左：-20px；
位置：相对位置；
}
h1{
字体大小：20px；
填充顶部：20px；
}
布莱克先生{
保证金：0自动；
背景：#000；
宽度：210px；
高度：210px；
背景图像：url（'http://lorempixel.com/250/250/');
}
.col-md-3{
位置：相对位置；
宽度：250px；
}
.col-md-3：之前{
内容：“；
显示：块；
位置：相对位置；
顶部：20px；
左：0px；
宽度：100%；
高度：40px；
背景：线性梯度（白色0%，透明0%），线性梯度（125度，#F98835 33.33%，透明33.33%）0%，线性梯度（55度，#F98835 33.33%，白色33.33%）0%；
背景：-webkit线性梯度（白色0%，透明0%），webkit线性梯度（125度，#F98835 33.33%，透明33.33%）0%，#F98835-webkit线性梯度（55度，#F98835 33.33%，白色33.33%）0%；
背景：-o-线性梯度（白色0%，透明0%），-o-线性梯度（125度，#F98835 33.33%，透明33.33%）0%，#F98835-o-线性梯度（55度，#F98835 33.33%，白色33.33%）0%；
背景：-莫兹线性梯度（白色0%，透明0%），莫兹线性梯度（125度，#F98835 33.33%，透明33.33%）0%，莫兹线性梯度（55度，#F98835 33.33%，白色33.33%）0%；
背景重复：重复-x；
背景尺寸：0px 100%，63px 32px，63px 32px；
背景职位：-18%0%；
}
.col-md-3：之后{
内容：“；
显示：块；
位置：相对位置；
-webkit变换：旋转（180度）；
变换：旋转（180度）；
顶部：0px；
左：0px；
宽度：100%；
高度：42px；
背景：线性梯度（白色0%，透明0%），线性梯度（125度，#F98835 33.33%，透明33.33%）0%，线性梯度（55度，#F98835 33.33%，白色33.33%）0%；
背景：-webkit线性梯度（白色0%，透明0%），webkit线性梯度（125度，#F98835 33.33%，透明33.33%）0%，#F98835-webkit线性梯度（55度，#F98835 33.33%，白色33.33%）0%；
背景：-o-线性梯度（白色0%，透明0%），-o-线性梯度（125度，#F98835 33.33%，透明33.33%）0%，#F98835-o-线性梯度（55度，#F98835 33.33%，白色33.33%）0%；
背景：-莫兹线性梯度（白色0%，透明0%），莫兹线性梯度（125度，#F98835 33.33%，透明33.33%）0%，莫兹线性梯度（55度，#F98835 33.33%，白色33.33%）0%；
背景重复：重复-x；
背景尺寸：0px 100%，63px 32px，63px 32px；
背景职位：-18%0%；
}

塞巴多斯六重奏
维拉马达莱纳酒店
塞巴多斯六重奏
维拉马达莱纳酒店
塞巴多斯六重奏
维拉马达莱纳酒店
塞巴多斯六重奏
维拉马达莱纳酒店
我会在顶部和底部三角形中使用图像（您可以使用相同的图像并旋转其中一个），在黑色标题背景和框阴影中使用负左/右边距。您能更好地解释负左/右边距吗？？像这样