Question

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

我有些疑惑。

设置盒子的宽度是错误的吗？如何在盒子的顶部和底部创建这些矛？任何人都可以帮我这个吗？

如何使'SEXTASESÁ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>

Answer 1

这就是我要这样做的方式：

对这些边框linear-gradient和col-md-3:before使用col-md-3:after，将width的{{1}}设置为总.dia并给它一个通过设置width + 40px来抵消-20px。我删除了引导程序并将left: -20px添加到display: inline-block。

Fiddle

.col-md-3

.col-md-3 {
  display: inline-block;
  width: 110%;
  margin: 25px;
}
.container {
  height: 400px;
}
.box {
  margin: 0 auto;
  background: #f98835;
  width: 250px;
  height: 50%;
  text-align: center;
}
.dia {
  padding: 5px 0;
  color: white;
  background: black;
  width: 290px;
  left: -20px;
  position: relative;
}
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/');
}
.col-md-3 {
  position: relative;
  width: 250px;
}
.col-md-3:before {
  content: " ";
  display: block;
  position: relative;
  top: 20px;
  left: 0px;
  width: 100%;
  height: 40px;
  background: linear-gradient(white 0%, transparent 0%), linear-gradient(125deg, #F98835 33.33%, transparent 33.33%) 0 0%, #F98835 linear-gradient(55deg, #F98835 33.33%, white 33.33%) 0 0%;
  background: -webkit-linear-gradient(white 0%, transparent 0%), -webkit-linear-gradient(125deg, #F98835 33.33%, transparent 33.33%) 0 0%, #F98835 -webkit-linear-gradient(55deg, #F98835 33.33%, white 33.33%) 0 0%;
  background: -o-linear-gradient(white 0%, transparent 0%), -o-linear-gradient(125deg, #F98835 33.33%, transparent 33.33%) 0 0%, #F98835 -o-linear-gradient(55deg, #F98835 33.33%, white 33.33%) 0 0%;
  background: -moz-linear-gradient(white 0%, transparent 0%), -moz-linear-gradient(125deg, #F98835 33.33%, transparent 33.33%) 0 0%, #F98835 -moz-linear-gradient(55deg, #F98835 33.33%, white 33.33%) 0 0%;
  background-repeat: repeat-x;
  background-size: 0px 100%, 63px 32px, 63px 32px;
  background-position: -18% 0%;
}
.col-md-3:after {
  content: " ";
  display: block;
  position: relative;
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
  top: 0px;
  left: 0px;
  width: 100%;
  height: 42px;
  background: linear-gradient(white 0%, transparent 0%), linear-gradient(125deg, #F98835 33.33%, transparent 33.33%) 0 0%, #F98835 linear-gradient(55deg, #F98835 33.33%, white 33.33%) 0 0%;
  background: -webkit-linear-gradient(white 0%, transparent 0%), -webkit-linear-gradient(125deg, #F98835 33.33%, transparent 33.33%) 0 0%, #F98835 -webkit-linear-gradient(55deg, #F98835 33.33%, white 33.33%) 0 0%;
  background: -o-linear-gradient(white 0%, transparent 0%), -o-linear-gradient(125deg, #F98835 33.33%, transparent 33.33%) 0 0%, #F98835 -o-linear-gradient(55deg, #F98835 33.33%, white 33.33%) 0 0%;
  background: -moz-linear-gradient(white 0%, transparent 0%), -moz-linear-gradient(125deg, #F98835 33.33%, transparent 33.33%) 0 0%, #F98835 -moz-linear-gradient(55deg, #F98835 33.33%, white 33.33%) 0 0%;
  background-repeat: repeat-x;
  background-size: 0px 100%, 63px 32px, 63px 32px;
  background-position: -18% 0%;
}

Answer 2

试试这个：

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

对于几何形式，您可以使用&befor与.box这里的链接指向如何使用css来渲染几何形状，它可能对您的情况有用：

The Shapes of CSS

创建一个复杂的框

2 个答案:

Fiddle